css透明度怎么设置，css透明度设置方法及常见问题解析
<!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> <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.3; }</style></head><body> <div class="box"></div></body></html>
注：其中 background:#f99; opacity:0.3;为关键代码，当 opacity 值为1时，表示完全不透明，为0时表示完全透明。
opacity: 0.3；这是“最重要的”，因为它是在 CSS 的现行标准。这将在 Firefox，Safari 和 Opera 的大多数版本的工作。这将是你所需要的一切如果所有的浏览器都支持目前的标准。当然是他们不会错。
filter:alpha(opacity=30);这一个是针对IE浏览器
-moz-opacity:0.3;你需要这一个支持老版本的 Mozilla 浏览器如 Netscape Navigator。
-khtml-opacity: 0.3;这是旧版本的 Safari（1.×）当渲染引擎是使用仍被称为 kthml，而不是目前的WebKit。
CSS 中用 javascript 或 jquery 实现透明度的改变
<!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> <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: 1; }</style> <script> _window.onload = function() { let box = document.getElementById("box"); box.onclick = function() { box.style.opacity = "0.4"; // 针对所有通用浏览器 box.style.filter = "alpha(opacity=40)"; // 针对IE浏览器 } }</script></head><body> <div id="box">这里是文字部分！</div></body></html>
<!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: 1; }</style> <script> $(document).ready(function(){ // $(function() { $("#transparent").click(function () { $("#box").css("opacity", "0"); }) $("#reset").click(function () { $("#box").css("opacity", "1"); }) })</script></head><body> <button id="transparent">设置为透明</button> <button id="reset">重置透明度</button> <div id="box">这里是文字部分！</div></body></html>
CSS透明技巧汇总
#myElement { -khtml-opacity: .5; -moz-opacity: 0.5; }-khtml-opacity 设置是针对旧版本的Webkit渲染引擎，这种专用属性现在已经过时了，除非你还有需要兼容Safari 1.x.的用户。
#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 格式而已。
本文地址：百科问答频道 https://www.neebe.cn/wenda/886524.html，易企推百科一个免费的知识分享平台，本站部分文章来网络分享，本着互联网分享的精神，如有涉及到您的权益，请联系我们删除，谢谢！
相关阅读
