Home / Questions / 29189
Accepted
Otto
Asked: 2020-10-22 07:41:51 +0800 CST 2020-10-22 07:41:51 +0800 CST

如何将透明的暗层应用于背景图像？

  • 772

我正在尝试将透明的黑色应用于背景图像以避免强烈或华丽的颜色。

无需使用任何特殊程序编辑图像。

我试图应用这种风格：

background-color: rgba(0,0,0,0.8);

但我一直没有成功。

如何让背景图像应用透明的黑色，如图层。

#image {
  background-color: rgba(0,0,0,0.8);
  background-image:url(http://www.gelfuzion.com/img/slides/nivo/bg-1.jpg);
  height: 500px;
  max-width: 100%;
}
<div id="image"></div>

html5

5 Answers

  1. Best Answer

    一种可能性是使用 CSS 过滤器来改变图像的对比度/亮度。如果将亮度设置在 0 和 1 之间，图像会看起来更暗。像这个例子：

    #image {
  background-color: rgba(0,0,0,0.8);
  background-image:url(http://www.gelfuzion.com/img/slides/nivo/bg-1.jpg);
  height: 500px;
  max-width: 100%;
  filter:brightness(0.4);
}
    <div id="image"></div>

    ::before另一种选择是使用o伪元素::after在图像顶部放置一个半透明层，从而使其看起来更暗。例如：

    #image {
  background-image:url(http://www.gelfuzion.com/img/slides/nivo/bg-1.jpg);
  height: 500px;
  max-width: 100%;
  position:relative;
  color: white;
  z-index:1;
}

#image::after {
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.6);
  z-index:-1;
}
    <div id="image">
  HOLA MUNDO
</div>

    • 14

  2. 您可以使用过滤器

    #image {
  background-image:url(http://www.gelfuzion.com/img/slides/nivo/bg-1.jpg);
  height: 500px;
  max-width: 100%;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}
    <div id="image"></div>

    • 3

  3. 您可以在背景图像中使用线性渐变：

    #image {

  background-image:linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.8)),url(http://www.gelfuzion.com/img/slides/nivo/bg-1.jpg);
  height: 500px;
  max-width: 100%;
}

    如果您不太了解它，可以按照这个简短的 youtube 教程进行操作：

    https://www.youtube.com/watch?v=ASgmfNvCQRg

    • 3

  4. 您可以应用与此类似的内容：

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

<h1>Image Transparency</h1>
<p>The opacity property specifies the transparency of an element. The lower the value, the more transparent:</p>

<p>Image with 50% opacity:</p>
<img src="img_forest.jpg" alt="Forest" width="170" height="100">

    来源：http ://www.w3schools.com/css/tryit.asp?filename=trycss_image_opacity

    • 2

  5. 提供的所有代码都用于相关主题，不幸的是它不仅会影响背景图像，还会影响字体。

    就我而言，我更喜欢编辑照片：/它的工作量更大，但更可靠。

    • 1