实体图像的透明颜色？ [复制]答案

【问题标题】：Transparent color of solid image? [duplicate]实体图像的透明颜色？ [复制]
【发布时间】：2020-06-17 05:46:08
【问题描述】：

我试图有一个大标题，其中有一张背景照片，然后一个纯色覆盖它，不透明度约为 90%。（所以你几乎看不到照片）。

这基本上就是我所拥有的：

.bgoverlay {
  background-image: url("https://i.pinimg.com/originals/06/51/e8/0651e8870431f9db3b26b1fd7615cec1.jpg");
}

.bgimg-1 {
  background-position: center top;
  background-repeat: no-repeat;
  top: 0px;
  background-size: 100%;
  background-color: #053426;
  min-height: 60%;
  opacity: 0.9;
}

<header class="bgimg-1 bgoverlay"></header>

编辑

谢谢大家 - 添加 :before 到目前为止效果很好。虽然，在响应方面，有没有办法改变背景大小？我尝试了 background-size 但它没有改变。

例如，如果我的最小高度为 70%，因此整个页眉占据了页面的 3/4，但是当我将其缩小到移动尺寸时，下面会显示纯色背景并且照片很小并且不够大，无法覆盖 71% 的最小高度。

谢谢

编辑 2

nvm 我最终使用@media 屏幕来缩小移动设备上的整体标题，现在它看起来很棒。谢谢！

【问题讨论】：

请不要在编辑现有问题时提出新问题。发布一个新问题。
没问题。你可能想要background-size: cover。

标签： html css background transparency

【解决方案1】：

你可以使用像:before.这样的伪元素
首先，将position: relative 添加到标题元素。然后，添加以颜色和不透明度绝对定位的伪元素，占据其父元素（标题）的整个宽度和高度。

header {
  width: 100%;
  height: 300px;
}
.bgoverlay {
  position: relative;
  background-image: url("https://i.pinimg.com/originals/06/51/e8/0651e8870431f9db3b26b1fd7615cec1.jpg");
}

.bgimg-1 {
  background-position: center top;
  background-repeat: no-repeat;
  top: 0px;
  background-size: 100%;
  min-height: 60%;
}
.bgoverlay:before {
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  opacity: 0.9;
  background-color: #053426;
 }

&lt;header class="bgimg-1 bgoverlay"&gt;&lt;/header&gt;

【讨论】：

【解决方案2】：

希望对你有所帮助。

.bgoverlay {
  background-image: url("https://i.pinimg.com/originals/06/51/e8/0651e8870431f9db3b26b1fd7615cec1.jpg");
}

.bgimg-1 {
  background-position: center top;
  background-repeat: no-repeat;
  top: 0px;
  background-size: 100%;
  min-height: 300px;
  position: relative;
}

header.bgimg-1.bgoverlay:after {
  content: '';
  height: 100%;
  width: 100%;
  background: #000;
  opacity: 0.9;
  position: absolute;
}

<header class="bgimg-1 bgoverlay">

</header>

【讨论】：

【解决方案3】：

如果 Azametzin 的解决方案不适合您，请使用非常大的内部 box-shadow（相对定位可能会因您的内容而变得棘手）。但请使用他们的解决方案作为一个真正的解决方案，也许我的作为后备方案。毕竟这有点hacky。

header {
  width: 100%;
  height: 300px;
}
.bgoverlay {
  position: relative;
  background-image: url("https://i.pinimg.com/originals/06/51/e8/0651e8870431f9db3b26b1fd7615cec1.jpg");
  box-shadow: inset 0 0 0 100vmax rgba(2, 20, 15, 0.9)
}

.bgimg-1 {
  background-position: center top;
  background-repeat: no-repeat;
  top: 0px;
  background-size: 100%;
  min-height: 60%;
}

&lt;header class="bgimg-1 bgoverlay"&gt;&lt;/header&gt;

【讨论】：