CSS图片透明度怎么设置，CSS 透明度设置方法-励北网

CSS图片透明度怎么设置，CSS 透明度设置方法

怎样在CSS样式中设置背景的透明度

怎样在 CSS 样式中设置背景的透明度,下面给出一个具体的实例。把类为 box 的层设为透明。

<!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图片透明度怎么设置，CSS 透明度设置方法

CSS 中用 javascript 或 jquery 实现透明度的改变

如何用 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: 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>

效果：

CSS图片透明度怎么设置，CSS 透明度设置方法

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> <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图片透明度怎么设置，CSS 透明度设置方法