html - 如何使用 CSS 使背景图像部分变暗？

Question

.darken {
    position: relative;
    width: auto;
    height: auto;
    margin: 10px;
    border-radius: 20px;
    border: hidden;
    padding: 20%;
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), no-repeat center top / cover;
}

<div class="darken" style="background-image: url("https://smorder.blob.core.windows.net/images/6/d9ffff37-79a2-44b2-aef4-6c8aadff1c6e");"></div>

但是，它并没有完全达到我想要的效果。因为我想使图像的左侧部分变暗。我想实现这样的目标:http://prntscr.com/gj0hs8

有什么想法可以实现这种变暗效果吗？

Answer 1

线性渐变也被视为背景图像。

如果在使用多个背景图像时先设置，则可以将其用作叠加层。

注意开始/结束值、方向并设置 2 种不同的颜色以绘制渐变(根据您的需要调整下面提供的示例)。

一个简单的渐变总是覆盖它的容器，不需要为它重新设置背景大小

示例如下。

.darken {
    position: relative;
    width: auto;
    height: auto;
    margin: 10px;
    border-radius: 20px;
    border: hidden;
    padding: 20%;
}

<div class="darken" style="
background:
    linear-gradient(135deg, rgba(0, 0, 0, 0.8) 40%, rgba(0, 0, 0, 0) 70%) no-repeat center top ,  
    url(http://lorempixel.com/800/500/nightlife/7) 0 0 /cover ;">
test</div>