#myElement { opacity: 0.7; }
三、IE下的CSS透明度
IE下照旧有别于其他浏览器，并且目前也有三个不同版本的IE在广泛使用，透明度设置是不同的，有时需要额外的CSS来控制：
#myElement { filter: alpha(opacity=40); }
上面的CSS使用专用的filter属性来设置IE6-8透明度。对于IE6和IE7需要注意：为了使得透明设置生效，元素必须是“有布局”。一个元素 可以通过使用一些CSS属性来使其被布局，有如width和position。
另外一个设置IE8的CSS透明度的方法语法如下：
#myElement { filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);/* 第一行在IE6, IE7和IE8下有效 */-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)";/*第二行仅在IE8下有效 */}
第一行代码针对当前所有IE版本，第二行仅针对 IE8。
注意两行代码的不同之处：在第二行代码中，在filter属性前跟着-ms-前缀，并且属性值有加引号，这些都是语法所必须的。
说实在，有了之前一个例子中用 alpha(opacity=40）的语法来作用于任何版本的 IE 下的任何有布局的元素之后，并不能确定是否还有必要用”progid“的方法
CSS 如何值改变背景透明的，不改变子元素透明度？
一般情况下，我们可以使用 css 的 opcity 属性改变某个元素的透明度，但是其元素下的子元素的透明度也会被改变，即使对子元素重新定义也没有用，例如：
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>透明度设置</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <style> html, body { width: 100%; height: 100%; padding: 0; margin: 0; } #box { width: 200px; height: 200px; margin: auto; border: 1px solid #999; background-color: #f99; opacity: 0.5; }</style> <script> $(document).ready(function(){ // $(function() { $("#transparent").click(function () { $("#box").css("opacity", "0"); }) $("#opacitas").click(function() { $("#box").css("opacity", "1"); }) $("#reset").click(function () { $("#box").css("opacity", "0.5"); }) })</script></head> <body> <button id="transparent">设置为透明</button> <button id="opacitas">设置为不透明</button> <button id="reset">重置透明度</button> <div id="box">这里是文字部分！</div></body> </html>
效果：
文字元素的透明度也会是 0.4。于是想一想，如果有方法只改变背景的透明度就能解决此问题了。
方法1：使用一张透明的图片做背景可以达成效果，但是有没有更简单的方法呢？
方法2：使用 RGBA。
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>透明度设置</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <style> html, body { width: 100%; height: 100%; padding: 0; margin: 0; } #box { width: 200px; height: 200px; margin: auto; border: 1px solid #999; background-color: rgba(255, 144, 144, 0.5); }</style> <script> $(document).ready(function(){ // $(function() { $("#transparent").click(function () { $("#box").css("background-color", "rgba(255, 144, 144, 0)"); }) $("#opacitas").click(function() { $("#box").css("background-color", "rgba(255, 144, 144, 1)"); }) $("#reset").click(function () { $("#box").css("background-color", "rgba(255, 144, 144, 0.5)"); }) })</script></head> <body> <button id="transparent">设置为透明</button> <button id="opacitas">设置为不透明</button> <button id="reset">重置透明度</button> <div id="box">这里是文字部分！</div></body> </html>
效果：
CSS在设置了透明度的层里，怎么让里面的层不透明
方法：
如果是颜色，完全可以用背景色透明 rgba 来代替 opacity，
如果是图片，就用 ps 简单处理一下即可。
opacity 这个属性指定的透明是包括里面的元素的，不可能只有外面透明，里面不透明
css里边写透明样式怎么写
如果是用样式的话需要用到滤镜
style="filter:Alpha(Opacity=opacity, FinishOpacity=finishopacity，Style=style, StartX=startX，StartY=startY，FinishX=finishX，FinishY=finishY)"
说明：
Opacity：起始值，取值为0～100, 0为透明，100为原图。
FinishOpacity：目标值。
Style：1或2或3
StartX：任意值
StartY：任意值
语法如下：
filter:Alpha(Opacity="0",FinishOpacity="75",Style="2")
但是因为滤镜的兼容性问题，最好是不要用，可以用 ps 做图的时候，把背景调一下透明度后导成 png 格式的图片就行了，如果透明的背景颜色一样的话，那么你可以切成 1px*1px 大小的 png 图片平铺，gif 只支持透明度 100% 也就是完全透明的图片，半透明的不支持，而 png 格式的图片则不存在什么问题，唯一会有问题的地方就只是 IE6 不兼容透明 png 格式而已。
本文地址：IT百科频道 https://www.hkm168.com/tags/917754_2.html，易企推百科一个免费的知识分享平台，本站部分文章来网络分享，本着互联网分享的精神，如有涉及到您的权益，请联系我们删除，谢谢！
相关阅读
