主页 / 问题 / 1240961
Accepted
Мне без сахара
Asked:2022-02-07 14:33:29 +0800 CST2022-02-07 14:33:29 +0800 CST

如何使背景变暗

  • 772

两张图片，一张阴影，如何用css做到这一点？我知道有模糊效果，但事实并非如此

在此处输入图像描述 在此处输入图像描述

html

1 个回答

  1. Best Answer

    第一个选项：

    div {float: left; display: inline-block; position: relative; width: calc(50% - 2px); height: 100vh; background: url(https://img3.goodfon.ru/wallpaper/nbig/1/5d/gorizont-oblaka-nebo-3342.jpg);}
div:nth-child(2) {border-left: 4px solid black;}

div:nth-child(2):after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
}
    <div></div>
<div></div>

    第二个选项：

    div {float: left; display: inline-block; position: relative; width: calc(50% - 2px); height: 100vh; background: url(https://img3.goodfon.ru/wallpaper/nbig/1/5d/gorizont-oblaka-nebo-3342.jpg);}

div:nth-child(2) {
  border-left: 4px solid black;
  background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://img3.goodfon.ru/wallpaper/nbig/1/5d/gorizont-oblaka-nebo-3342.jpg);
}
    <div></div>
<div></div>

    变体三（这当然不是变暗，而是像这样）：

    div {float: left; display: inline-block; position: relative; width: calc(50% - 2px); height: 100vh; background: url(https://img3.goodfon.ru/wallpaper/nbig/1/5d/gorizont-oblaka-nebo-3342.jpg);}

div:nth-child(2) {
  border-left: 4px solid black;
  filter: contrast(3);
}
    <div></div>
<div></div>

    • 1

相关问题