如何为页面背景设置图像不透明度

Question

如何为页面背景设置图像不透明度

8

如何设置标签背景图片的透明度？

我的html代码：

<body background="http://ib1.keep4u.ru/b/070815/ef2714da63d5940bf5.jpg">
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
</body>

我的 CSS：

body{
    opacity: 0.1,
    filter:alpha(opacity=10)
}

- Alex

2

背景图像不能具有除1以外的不透明度值。您必须使用一个定位的全尺寸div，该div具有一个背景图像，并在该div上使用不透明度。 - Paulie_D

1

可能是重复的问题：CSS：如何设置带有不透明度的背景图像？ - Paulie_D

1

我已经在你的问题中注释掉了JSFiddle链接。当你放置JSFIddle链接时，你被告知要发布代码，并且将一个单词包装在代码标记中不算是发布相应的代码。请适当地编辑你的问题，否则如果JSFiddle离线，这个问题将完全无用。 - James Donnelly

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- dyaa · Accepted Answer

CSS中没有background-opacity属性，但是你可以通过在元素后面插入一个伪元素，然后将其设为与元素大小相同的常规透明度，来模拟它。

可以这样做：

body::after {
  content: "";
  background: url(http://ib1.keep4u.ru/b/070815/ef2714da63d5940bf5.jpg);
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}

~~在这里检查 http://jsfiddle.net/dyaa/k4dw5hyq/2/~~

编辑：在body标签中不再需要opacity和filter属性 http://jsfiddle.net/dyaa/k4dw5hyq/3/