Question

如何为background-image + background-color标签添加不透明的body？

Answer 1

尝试此代码在您的体内包含div标签！

.background {
    background:url('http://placehold.it/100x100');
    position: relative;
    height: 100px;
  width: 100px;
}

.layer {
    background-color: rgba(75, 86, 160, 0.7);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

<div class="background">
    <div class="layer">
    </div>
</div>

Answer 2

您可以在具有background-blend-mode的{{1}}上使用<div>。

编辑：您可能希望创建一个background-image元素作为站点的主要容器，而不是将背景图像添加到<div>上。

<body>

.card__image {
    width: 300px;
    height: 300px;
    
    /* Change the opacity of Dodger Blue background by
       selecting a value between 0-1 for the fourth argument. */
    background: rgba(34, 167, 240, 0.75);
    background-image: url('https://unsplash.it/300');
    background-blend-mode: multiply;
}

如何添加不透明的背景图片+背景色？

2 个答案: