html - 如何在 css3 中的 float 元素上放置背景并更改其不透明度？

Question

在 css 中，我在 style 文件夹中有一些图像，因此请忽略其他未显示的图像。 float 元素 leftpara 和 joinbutton(尽管它是一个 para 而不是按钮)有白色背景，我想给它一个 .4 的不透明度。

#stuff:before{
  display: block; content:""; position: absolute; z-index:-1;
  background: url(blah.jpg);
  opacity:.3;
  top:10%; left: 0; right: 0; 
  height: 50%;
}

fiddle

Answer 1

你可以试试这段代码:

在hsla(0,0%,100%,0.70) 或 rgba 中，您可以使用具有任意百分比饱和度或不透明度的白色背景来获得您想要的外观。 您可以使用 filter: alpha(opacity=50); 获取不透明度

background-attachment: fixed;
background-image: url(blah.jpg);
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;
filter: alpha(opacity=50);