When we are doing PC-side projects, we often encounter the need for transparent backgrounds and transparent pictures, but there are often many problems with transparency, especially if the background transparent content is opaque, it is more troublesome to be compatible with all browsers.
How to achieve transparent background and opaque text, compatible with all browsers?
In fact, what we usually say about adjusting the transparency is actually adjusting the opacity in the style, as shown below:
Open ps, on the layer panel, you can see the menu of settings-layer adjustment opacity, from 0% (completely transparent) to 100% (opaque)
There are usually three ways to achieve a transparent css style. The following is the writing method with an opacity of 50%
- For css3
opacity:value,valuethe value ranges from 0 to 1, such as opacity: 0.5 - For css3
rgba(red, green, blue, alpha),alphathe value of (transparency) ranges from 0 to 1, such asrgba(255,255,255,0.5) - IE exclusive filter
filter:Alpha(opacity=value),valuethe value ranges from 0 to 100, such asfilter:Alpha(opacity=50)
Let us explain one by one:
1. The opacity of Css3
Compatibility: Css3's opacity is not compatible with lower versions of IE, not supported by IE6/7/8, and supported by IE9 and above
opacityApplicable situation: opacitynot only the set elements are transparent, the descendant elements will also be inherited opacity, and they also have transparency effects, so they opacityare generally used to adjust the transparency of individual pictures or some modules
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding:0;
margin: 0;
}
.content{
width: 200px;
height: 100px;
padding: 50px 50px;
background-color: red;
opacity: 0.5;
/* 设置不透明度50% */
}
p{
width: 100px;
height: 100px;
background: green;
}
</style>
</head>
<body>
<div class="content">
<p>背景透明,内容也透明</p>
</div>
</body>
</html>
After use opacity, the entire module is transparent, as shown below:
Then the use of opacityrealization (transparent background, opaque text) is impossible.
2. rgba of css3
Compatibility: IE6, 7, 8 do not support, IE9 and above versions and standard browsers all support
Instructions for use: Set the transparency of the color, as long as the set color is used.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding:0;
margin: 0;
}
.content{
width: 200px;
height: 100px;
padding: 50px 50px;
background-color: rgba(255, 0, 0, 0.5);
/* 用rgba设置背景透明，内容不会受影响 */
}
p{
width: 100px;
height: 100px;
background: green;
}
</style>
</head>
<body>
<div class="content">
<p>背景透明,内容也透明</p>
</div>
</body>
</html>
The effect we want
The effect we want
Error display of IE 6, 7, 8rgba
So rgba can set the effect we want, but there is compatibility. IE6, 7, 8 setting rgba will display incorrectly and cannot be recognized, but there are IE exclusive filters filter:Alpha(opacity=x), we can take a look together.
3. IE exclusive filter filter: Alpha(opacity=x)
Instructions for use: IE browser is exclusive, there are many problems, this article takes setting background transparency as an example, as follows:
- Only supports IE6, 7, 8, 9, and was abolished in IE10
- In IE6 and 7, you need to activate the haslayout property of IE (for example: *zoom:1 or *overflow:hidden) to make it understand filter:Alpha
- In IE6, 7, and 8, the filter:Alpha element is set, and the parent element is set to position:static (default attribute), and its child elements are relatively positioned, which can make the child elements opaque
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding:0;
margin: 0;
}
.content{
width: 200px;
height: 100px;
padding: 50px 50px;
background-color: red;
filter:Alpha(opacity=50);
/* 只支持IE6、7、8、9 */
position:static;
/* IE6、7、8只能设置position:static(默认属性) ，否则会导致子元素继承Alpha值 */
*zoom:1;
/* 激活IE6、7的haslayout属性，让它读懂Alpha */
}
p{
width: 100px;
height: 100px;
background: green;
position: relative;
}
</style>
</head>
<body>
<div class="content">
<p>背景透明,内容也透明</p>
</div>
</body>
</html>
IE6, 7, 8 can recognize the filter filter
The IE10 version was abolished, and IE10 and above are not recognized
4. A transparent and fully compatible solution
From the above analysis, we know that setting the transparent background content to be opaque, and the available properties are the exclusive filters of rgba and IEfilter:Alpha
For IE6, 7, and 8 browsers, we can use the fiter filter. For standard browsers, we use rgba. So the problem is that the IE9 browser supports both attributes. Using them together will repeatedly reduce the opacity. Then, how to only fiter:AlphaHow to use IE6 , 7, 8? We can use CssHack to set up IE related hacks to find ways to only support IE 6, 7, and 8.
/* 只支持IE6、7、8 */
@media \0screen\,screen\9 {...}All problems of transparency have been solved, and the entire code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding:0;
margin: 0;
}
.content{
width: 200px;
height: 100px;
padding: 50px 50px;
background-color: rgba(255, 0, 0, 0.5);
}
p{
width: 100px;
height: 100px;
background: green;
}
@media \0screen\,screen\9 {/* 只支持IE6、7、8 */
.content{
background-color:red;
filter:Alpha(opacity=50);
position:static;
/* IE6、7、8只能设置position:static(默认属性) ，否则会导致子元素继承Alpha值 */
*zoom:1;
/* 激活IE6、7的haslayout属性，让它读懂Alpha */
}
.content p{
position: relative;
/* 设置子元素为相对定位，可让子元素不继承Alpha值 */
}
}
</style>
</head>
<body>
<div class="content">
<p>背景透明,内容也透明</p>
</div>
</body>
</html>