CSS：使用不透明度设置背景图像？ [英] CSS: set background image with opacity?

问题描述

因此，我可以在CSS参考中看到如何设置图像透明度和如何设置背景图片。但是我怎么能结合这两个为了设置透明的背景图片？

So, I can see in CSS references how to set image transparency and how to set a background image. But how can I combine these two in order to set a transparent background image?

我有一个图像，我想用作背景，但它也是明亮 - 我想把不透明度降到约0.2。我如何做到这一点？

I have an image that I'd like to use as a background, but it is too bright - I'd like to turn the opacity down to about 0.2. How can I do this?

#main {
    background-image: url(/wp-content/uploads/2010/11/tandem.jpg); 
}

推荐答案

>

Two methods:

1. 转换为PNG并使原始图片0.2不透明


2. （更好的方法）有< div> 是 position：absolute; 之前 #main 与 #main 相同的高度，然后应用背景图像和 opacity：0.2; filter：alpha（opacity = 20）; 。

1. Convert to PNG and make the original image 0.2 opacity
2. (Better method) have a <div> that is position: absolute; before #main and the same height as #main, then apply the background-image and opacity: 0.2; filter: alpha(opacity=20);.

这篇关于CSS：使用不透明度设置背景图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！