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种不同的颜色以绘制渐变（根据您的需要调整下面提供的示例）。

简单渐变始终覆盖其容器，无需重置背景大小

以下示例。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

你需要一个div作为叠加，并给这个渐变，它应该工作

Answer 3

希望这可能有效

.darken {
    position: relative;
    width: auto;
    height: auto;
    margin: 10px;
    border-radius: 20px;
    border: hidden;
    padding: 20%;
 background-image: url("https://preview.ibb.co/fQxszF/security.jpg");
 background-repeat: no-repeat;
 background-size: cover;
}
.overlay::before {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-230px, -60px) rotate(145deg);
    content: '';
    display: block;
    width: 77%;
    height: 65%;
    background: rgba(0, 0, 0, 0.9);
}

<div class="darken overlay"></div>

在div中包含类叠加。

欣赏是否有用。

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

3 个答案: