我正在尝试使用大页眉，其中包含背景照片，然后在其上面覆盖纯色，不透明度约为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>
edit
谢谢大家-添加：before到目前为止效果很好。尽管在响应式响应方面，是否可以更改背景大小？我尝试了背景尺寸，但没有改变。
例如，如果我的最小高度为70％，因此整个标题占据页面的3/4，但是当我将其缩小为移动尺寸时，下面显示的是纯背景色，照片很小而不是大到足以覆盖71％的最小高度。
谢谢
编辑2
nvm，我最终使用@media屏幕缩小了移动设备上的整体标题，现在看起来不错。谢谢！
我正在尝试使用大页眉，其中包含背景照片，然后在其上面覆盖纯色，不透明度约为90％。 （因此您几乎看不到照片）。这基本上就是我所拥有的：....
您可以使用:before.之类的伪元素首先，将position: relative添加到标题元素。然后，添加绝对颜色和不透明度定位的伪元素，占据其父对象（标头）的整个宽度和高度。
希望对您有帮助。
如果Azametzin的解决方案无法为您解决（相对定位可能会使您的内容变得棘手），请使用非常大的内部box-shadow。但是，请使用他们的解决方案作为真正的解决方案，也许将我的解决方案用作备用。毕竟有点hacky