Css 在背景图片上应用背景

Question

我目前有两张图片，我想对它们应用滤镜或渐变：

Html:

<div class='category_a tinted'>

</div>
<div class='category_b tinted'>

</div>

Css:

.category_a{
  background-image : url(...);
}
.category_b{
  background-image : url(...);
}

.tinted{
  background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5), 100%);
}

但是，它的背景会覆盖背景图像属性。我怎样才能同时拥有色调和图像（不复制代码）。

Answer 1

    background-image: url(), gradient-goes-here

试试这个。它会起作用

    background-image: url(IMAGE), linear-gradient(...Color You Want...)

Answer 2

如果您使用的是 LESS，请尝试以下操作：

.category_a:after {
    content:"";
    .tinted; // class with your background;
    position:absolute;
    // Add your top, bottom, left, right here
    z-index:1;
}

或者，如果您不使用 LESS，试试这个

.category_a:after {
    content:"";
    position:absolute;
    // Add your top, bottom, left, right here
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), 100%);
    z-index:1;
}

Answer 3

为了扩展@ChronixPsyc 点，附加到单独 class 的伪元素将实现这一点。

如果 div 有内容，您可能运行遇到 z-index 的问题，但这可以修复。

[class*="category"] {
    width: 100px;
    height: 100px;
    display: inline-block;
    border:1px solid red;
    margin: 25px;
}
.tinted > * {
    position: relative; /* required to 'set' z-index */
}

h2 {
    color: white;
    text-align: center;
}

.category_a {
    background-image: url(http://lorempixel.com/100/100/sports/1/);
}

.category_b {
    background-image: url(http://lorempixel.com/100/100/sports/2/);
}

.tinted {
        position: relative; /* positioning context */
}

.tinted::before {
    content:"";
    position: absolute;
    width: 100%;
    height: 100%;
    top:0;
    left:0;
    background-image: linear-gradient(to bottom, rgba(255,0,0,0.5), rgba(0,0,0,0.5));
}

<div class="category_a tinted">
    <h2>Caption</h2>>
</div>

<div class="category_b tinted">
        <h2>Caption</h2>>
</div>

Css 在背景图片上应用背景

Css apply background on background image

css

background