我如何用CSS来修饰背景图像?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (75)

我有一个背景图像通过CSS设置。

html {
background-image: url('../img/cello.jpg');
background-attachment: fixed;
background-size: 100%;
}

我计划为网站的不同页面设置一个不同的背景图片:因此,重要的是,文本应该是可读的。现在,我在中间的#主内容框中有一个半透明的黑色背景,以确保可读性:

#main {
background: rgba(0, 0, 0, 0.5);
}

不过,我真正想做的是在整个背景图像上有这样的半透明背景,因为黑匣子看起来有点笨重。<div id=#tint>它包括整个HTML文档,并将RGBA(0,0,0,0.5)给#tint,但这根本不起作用。我要么什么也不做,要么我可以让整个背景变成一个简单的灰色,根本看不到背景图像。难道这根本不可能吗?

提问于
用户回答回答于

我认为你需要创建一个覆盖元素(可能div)它具有所寻求的半透明的背景。比如:

.overlay {
    z-index: 1;
    height: 100%;
    width: 100%;
    position: fixed;
    overflow: auto;
    top: 0px;
    left: 0px;
    background: rgba(0, 0, 0, 0.7); /*can be anything, of course*/
}
用户回答回答于

使用background-blend-mode

你可以使用background-blend-modeCSS属性:

.background-tint {
  background-color: rgba(200,100,0,.5); // Tint color
  background-blend-mode: multiply;
}

使用flat linear-gradient 和多背景叠加。

.background-tint {
  background-image: 
    linear-gradient( rgba(0,0,0,.5), rgba(0,0,0,.5) ),
    url('http://placehold.it/420')
}

我认为这是最广泛使用的技术,但它的缺点是硬编码,你不能只是采取一个类,把它放在一个元素上,并使一个色调。

你可以把它做成少一点的混合,比如:

less

.background-tint(@tint-color, @image-url) {
  background-image: 
    linear-gradient( @tint-color, @tint-color ),
    url( @image-url )
}

sass

@mixin background-tint($tint_color, $image_url) {
  background-image: 
    linear-gradient( $tint_color, $tint_color ),
    url( $image_url )
}

使用透明背景

.background-tint { position: relative; }

.background-tint::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.5);
}

该方法的优点是可以在大多数浏览器上工作,并且只是添加到任何元素中的一个很好的类。缺点是,如果元素中还有其他内容,则必须用某种位置将其封装在div中。position: relative最有效。

例子:

<div class="background-tint">
  <div class="u-relative">Some text here</div>
</div>
.u-relative { position: relative; }

扫码关注云+社区

领取腾讯云代金券