CSS透明度–详细概述

CSS Transparency – full overview Today we will talk about CSS. And our article will about – how to make elements transparent. Proceeding from my experience I can tell that today we don`t have any cross-browser solution to apply transparency for objects. Each browser has own idea about a transparency. I will tell about all these methods in details, for each of browsers.

CSS透明度–完整概述今天我们将讨论CSS。我们的文章将探讨–如何使元素透明。从我的经验可以看出，今天我们没有任何跨浏览器解决方案可以为对象应用透明性。每个浏览器对于透明性都有自己的想法。我将针对每种浏览器详细介绍所有这些方法。

First method – using opacity property. This property has appeared in CSS3 and is at present supported by the majority of browsers (Firefox, Netscape 7, Safari, Opera 9). As value – value of a transparency from 0.0 (fully transparent) to 1.0 (fully opaque).

第一种方法–使用不透明度属性。此属性已出现在CSS3中，目前受大多数浏览器(Firefox，Netscape 7，Safari，Opera 9)支持。作为值–透明度的值，范围从0.0(完全透明)到1.0(完全不透明)。

Example:

例：

#sample1{width:400px;height:400px;background:url(https://www.script-tutorials.com/demos/50/back.jpg) no-repeat;border:2px solid black;padding:20px}#sample1 div{padding:20px;font-size:18px;font-weight:bold;background-color:#fff;opacity:0.6;margin-bottom:10px}#sample1 img{opacity:0.6}#sample1{width:400px;height:400px;background:url(https://www.script-tutorials.com/demos/50/back.jpg) no-repeat;border:2px solid black;padding:20px}#sample1 div{padding:20px;font-size:18px;font-weight:bold;background-color:#fff;opacity:0.6;margin-bottom:10px}#sample1 img{opacity:0.6}

First sample using ‘opacity’ css property to set transparency

第一个使用“ opacity” css属性设置透明度的示例

Unfortunately it doesn’t work in Internet Explorer till now. To use a transparency in IE we should use filters, like filter:alpha(opacity=60);. Values vary from 0(fully transparent) to 100(fully opaque).

不幸的是，到目前为止，它在Internet Explorer中不起作用。要在IE中使用透明度，我们应该使用过滤器，例如filter：alpha(opacity = 60); 。值的范围从0(完全透明)到100(完全不透明)。

Example of using:

使用示例：

#sample2{width:400px;height:400px;background:url(https://www.script-tutorials.com/demos/50/back.jpg) no-repeat;border:2px solid black;padding:20px}#sample2 div{padding:20px;font-size:18px;font-weight:bold;background-color:#fff;filter:alpha(opacity=60);margin-bottom:10px}#sample2 img{filter:alpha(opacity=60)}#sample2{width:400px;height:400px;background:url(https://www.script-tutorials.com/demos/50/back.jpg) no-repeat;border:2px solid black;padding:20px}#sample2 div{padding:20px;font-size:18px;font-weight:bold;background-color:#fff;filter:alpha(opacity=60);margin-bottom:10px}#sample2 img{filter:alpha(opacity=60)}

Second sample using ‘filter:alpha’ for IE to set transparency

第二个示例使用IE的“ filter：alpha”设置透明度

Here we start to note strangenesses, in IE7 a transparency was successfully applied to the image, but not to a text element. In IE8 all works normally in both cases.

在这里，我们开始注意到一些奇怪之处，在IE7中，透明性已成功应用于图像，但未应用于文本元素。在IE8中，两种情况下都正常工作。

We also can use -moz-opacity to support old versions of Netscape Navigator. Example: -moz-opacity:0.6;

我们还可以使用-moz-opacity支持旧版本的Netscape Navigator。例如：-moz-opacity：0.6;

Plus, we can use -khtml-opacity to support old versions of Safari (1.x). Example: -moz-opacity:0.6;

另外，我们可以使用-khtml-opacity支持旧版本的Safari(1.x)。例如：-moz-opacity：0.6;

On our happiness, CSS3 presents us one more new method for transparency – via rgba function. It allow us to fill areas with transparency. At present supported by next browsers : Firefox 3.x, Google Chrome, Safary 3.x, Opera 10.x and seems even Internet Explorer 9. Here are example: background: rgba(255, 255, 255, 0.6);

令我们高兴的是，CSS3通过rgba函数为我们提供了另一种新的透明度方法。它使我们可以透明地填充区域。目前受以下浏览器支持：Firefox 3.x，谷歌浏览器，Safary 3.x，Opera 10.x甚至Internet Explorer9。例如：background：rgba(255，255，255，0.6);

First 3 digits – RGB color value, last one (from 0.0 to 1.0) – alpha (transparency) value.

前3位-RGB颜色值，后一位(从0.0到1.0)-alpha(透明度)值。

Example:

例：

#sample3{width:400px;height:400px;background:url(https://www.script-tutorials.com/demos/50/back.jpg) no-repeat;border:2px solid black;padding:20px}#sample3 div{padding:20px;font-size:18px;font-weight:bold;background:rgba(255, 255, 255, 0.6);margin-bottom:10px}#sample3 img{background:rgba(255, 255, 255, 0.6)}#sample3{width:400px;height:400px;background:url(https://www.script-tutorials.com/demos/50/back.jpg) no-repeat;border:2px solid black;padding:20px}#sample3 div{padding:20px;font-size:18px;font-weight:bold;background:rgba(255, 255, 255, 0.6);margin-bottom:10px}#sample3 img{background:rgba(255, 255, 255, 0.6)}

Third sample using ‘rgba’ to set transparency

第三个示例使用“ rgba”设置透明度

As we can see – our text much more readable than in first example. And all just because opacity property forces all descendant elements to also become transparent, but rgba – no.

我们可以看到–我们的文本比第一个示例更具可读性。所有这些都是因为不透明度属性迫使所有后代元素也变得透明，但是rgba –不。

And at last, we also can use another filter for IE8: progid:DXImageTransform.Microsoft.gradient.

最后，我们还可以对IE8使用另一个过滤器： progid：DXImageTransform.Microsoft.gradient 。

Example:

例：

#sample4{width:400px;height:400px;background:url(https://www.script-tutorials.com/demos/50/back.jpg) no-repeat;border:2px solid black;padding:20px}#sample4 div{padding:20px;font-size:18px;font-weight:bold;margin-bottom:10px;background:transparent;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#60FFFFFF,endColorstr=#60FFFFFF)}#sample4 img{background:transparent;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#60FFFFFF,endColorstr=#60FFFFFF)}#sample4{width:400px;height:400px;background:url(https://www.script-tutorials.com/demos/50/back.jpg) no-repeat;border:2px solid black;padding:20px}#sample4 div{padding:20px;font-size:18px;font-weight:bold;margin-bottom:10px;background:transparent;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#60FFFFFF,endColorstr=#60FFFFFF)}#sample4 img{background:transparent;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#60FFFFFF,endColorstr=#60FFFFFF)}

Forth sample using ‘gradient’ filters for IE to set transparency

使用IE的“渐变”过滤器设置透明度的第四个示例

As we can see – this working only for text objects. Here are used HTML code:

如我们所见–这仅适用于文本对象。以下是使用HTML代码：


<div id="sample4">
<div>Fifth sample using different methods</div>
<img src="globe.jpg" alt="jpg image" title="jpg image" />
<img src="lens.png" alt="png image" title="png image" />
</div>


<div id="sample4">
<div>Fifth sample using different methods</div>
<img src="globe.jpg" alt="jpg image" title="jpg image" />
<img src="lens.png" alt="png image" title="png image" />
</div>

And CSS styles:

和CSS样式：


#sample4 {
width:400px;
height:400px;
background:url(back.jpg) no-repeat;
border:2px solid black;
padding:20px;
}
#sample4 div {
padding:20px;
font-size:18px;
font-weight:bold;
margin-bottom:10px;
background:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#60FFFFFF,endColorstr=#60FFFFFF);
}
#sample4 img {
background:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#60FFFFFF,endColorstr=#60FFFFFF);
}


#sample4 {
width:400px;
height:400px;
background:url(back.jpg) no-repeat;
border:2px solid black;
padding:20px;
}
#sample4 div {
padding:20px;
font-size:18px;
font-weight:bold;
margin-bottom:10px;
background:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#60FFFFFF,endColorstr=#60FFFFFF);
}
#sample4 img {
background:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#60FFFFFF,endColorstr=#60FFFFFF);
}

So, in result, what we can do to make it more cross-browsing? Right, we can apply all different possible properties together:

因此，结果是，我们可以做些什么来使其更具跨浏览能力？正确，我们可以将所有可能的属性一起应用：

#sample5{width:400px;height:400px;background:url(https://www.script-tutorials.com/demos/50/back.jpg) no-repeat;border:2px solid black;padding:20px}#sample5 div{padding:20px;font-size:18px;font-weight:bold;margin-bottom:10px;background:#FFF;filter:alpha(opacity=60);-khtml-opacity:0.6;-moz-opacity:0.6;opacity:0.6}#sample5 img{filter:alpha(opacity=60);-khtml-opacity:0.6;-moz-opacity:0.6;opacity:0.6}#sample5{width:400px;height:400px;background:url(https://www.script-tutorials.com/demos/50/back.jpg) no-repeat;border:2px solid black;padding:20px}#sample5 div{padding:20px;font-size:18px;font-weight:bold;margin-bottom:10px;background:#FFF;filter:alpha(opacity=60);-khtml-opacity:0.6;-moz-opacity:0.6;opacity:0.6}#sample5 img{filter:alpha(opacity=60);-khtml-opacity:0.6;-moz-opacity:0.6;opacity:0.6}

Fifth sample using different methods

使用不同方法的第五个样本

这是我们示例HTML代码： (Here are HTML code of our example:)


<div id="sample5">
<div>Fifth sample using different methods</div>
<img src="globe.jpg" alt="jpg image" title="jpg image" />
<img src="lens.png" alt="png image" title="png image" />
</div>


<div id="sample5">
<div>Fifth sample using different methods</div>
<img src="globe.jpg" alt="jpg image" title="jpg image" />
<img src="lens.png" alt="png image" title="png image" />
</div>

和CSS样式： (And CSS styles:)


#sample5 {
width:400px;
height:400px;
background:url(back.jpg) no-repeat;
border:2px solid black;
padding:20px;
}
#sample5 div {
padding:20px;
font-size:18px;
font-weight:bold;
margin-bottom:10px;
/*background: rgba(255, 255, 255, 0.6); for future */
background:#FFF;
filter:alpha(opacity=60);
-khtml-opacity: 0.6;
-moz-opacity:0.6;
opacity: 0.6;
}
#sample5 img {
/*background: rgba(255, 255, 255, 0.6); for future */
filter:alpha(opacity=60);
-khtml-opacity: 0.6;
-moz-opacity:0.6;
opacity: 0.6;
}


#sample5 {
width:400px;
height:400px;
background:url(back.jpg) no-repeat;
border:2px solid black;
padding:20px;
}
#sample5 div {
padding:20px;
font-size:18px;
font-weight:bold;
margin-bottom:10px;
/*background: rgba(255, 255, 255, 0.6); for future */
background:#FFF;
filter:alpha(opacity=60);
-khtml-opacity: 0.6;
-moz-opacity:0.6;
opacity: 0.6;
}
#sample5 img {
/*background: rgba(255, 255, 255, 0.6); for future */
filter:alpha(opacity=60);
-khtml-opacity: 0.6;
-moz-opacity:0.6;
opacity: 0.6;
}

结论 (Conclusion)

Transparency – very weird thing. And we should use necessary styles in different cases. For text, better to use ‘rgba’ as I think. Anyway, most of browsers will support this property soon. To support older versions – we always can use our result combination of styles. So about images. ‘Opacity’ and ‘rgba’ works well (and filters for IE), but, nevertheless, maybe using transparent PNG images will better? :) I hope that our new lesson was useful for you. Good luck!

透明度–非常奇怪的事情。而且我们应该在不同情况下使用必要的样式。对于文本，我认为最好使用“ rgba”。无论如何，大多数浏览器将很快支持此属性。为了支持较旧的版本，我们始终可以使用样式的结果组合。关于图像。 “不透明度”和“ rgba”效果很好(以及用于IE的过滤器)，但是，尽管如此，也许使用透明的PNG图像会更好吗？ :)我希望我们的新课程对您有所帮助。祝好运！

翻译自: https://www.script-tutorials.com/css-transparency-a-detailed-overview/