我可以在同一属性中设置背景图像和不透明度吗？

Question

我可以在CSS参考中看到如何设置图像透明度以及如何设置背景图像.但是,如何组合这两个以设置透明背景图像？

我有一个我想用作背景的图像,但它太亮了 - 我想将不透明度降低到约0.2.我怎样才能做到这一点？

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

Answer 1

#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;
}

Answer 2

两种方法:

1. 转换为PNG并使原始图像为0.2不透明度
2. (更好的方法)有一个<div>是position: absolute;前#main和相同的高度#main,然后应用背景图像和opacity: 0.2; filter: alpha(opacity=20);.

Answer 3

1 div和NO透明图像的解决方案:

您可以使用多背景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/

Answer 4

简单解决方案

如果您只需要将渐变设置为背景图像:

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

Answer 5

我看到了这一点,在CSS3中,您现在可以像这样放置代码.让我们说我希望它涵盖整个背景我会做这样的事情.然后使用hsla(0,0%,100%,0.70)或rgba,您使用白色背景,无论百分比饱和度或不透明度,都可以获得您想要的外观.

.body{
    background-attachment: fixed;
    background-image: url(../images/Store1.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;
}

Answer 6

您可以使用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(https://i.stack.imgur.com/Hp53k.jpg);
  background-size: cover;
  opacity: 0.4;
}

<div class="bg-container">
   <div class="content">
     <h1>Background Opacity 0.4</h1>
   </div>
</div>

Answer 7

我有一个类似的问题。我有一个图像，想降低透明度并在图像后面有一个黑色背景。我没有降低不透明度或创建黑色背景或任何辅助 div，而是在一行上为图像设置了线性渐变：

background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.8) 100%), url("/img/picture.png");