1

如何使用 CSS 设置背景图像不透明度，我只想为背景图像设置不透明度，而不是为 div 中的每个元素设置不透明度。

例如，如果我使用此代码，它适用于 div 中的每个元素，

.myclass {
-khtml-opacity:.50; 
 -moz-opacity:.50; 
 -ms-filter:"alpha(opacity=50)";
  filter:alpha(opacity=50);
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
  opacity:.50; 
}

我只想为背景图像设置不透明度，请大家帮帮我

4

5 回答 5

3

CSS 不支持为背景图像单独设置不透明度。您需要将图像本身修改为具有适当 Alpha 通道信息的半透明 PNG。

使用 CSS3 伪元素你可以破解它，但这并不是真正的“漂亮”，它不再是一个真实的背景，影响大小选项等。

于 2013-07-30T10:27:03.833 回答
2

具有 1 个 div 且没有透明图像的解决方案：

您可以使用多背景 CSS3 功能并放置两个背景：一个带有图像，另一个带有透明面板（因为我认为没有办法直接设置背景图像的不透明度）：

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");

http://jsfiddle.net/pBVsD/1/

于 2013-07-30T10:40:39.490 回答
1

只需在<div>设置的不透明度中添加图像并position: absolute 注意它应该具有相同的高度和宽度。看看这个

演示

于 2013-07-30T10:32:13.117 回答
0

最好的方法是在.myclass之前有一个位置：absolute并且与.myclass相同的高度，然后应用背景图像和不透明度：0.5; 过滤器：阿尔法（不透明度= 50）；

于 2013-07-30T10:36:01.253 回答
0

我使用了以下功能，效果很好。 filter:alpha(opacity=x). 可以取 0 到 100 之间的x值。随着值变大，透明度会增加，您可以在元素的悬停属性中使用它。

这是一个例子：

img {
  opacity: 0.5;
  filter: alpha(opacity=50); /* For IE8 and earlier */
}

img:hover {
  opacity: 1.0;
  filter: alpha(opacity=100); /* For IE8 and earlier */
}
于 2019-06-26T08:52:40.957 回答