如何使3个div后面的水槽流过一个图像？

问题描述

我正在尝试找出显示三个div并在它们后面流动相同图像的最佳方法。

查看我的草图文件中的图像：

this link

我的第一次尝试是3个div绝对落后一个图像这3个div具有一个“：after”伪元素，该元素具有深色背景点缀设计，因此它覆盖了否则将看到的彩色图像。

查看图片：（伪元素目前尚不完善，但我确定您已经明白了...我也为该作品添加了阴影，以便于查看...）

但是这些点不会总是与背景匹配，我认为必须有一种更优雅的方式来做到这一点。我猜的另一个选择是以某种方式使用相同的图像3次，并以某种方式将其恰好定位在3个div中的每一个中？

有什么想法吗？是否有可以在这里使用的背景裁剪属性？

解决方法

这是一个使用伪元素和mask的技巧，您无需处理任何偏移量，它就会响应。技巧是应用相对于容器（而不是子元素）创建的伪元素，然后用蒙版剪切不需要的部分以获得所需的结果：

.container {
  padding: 20px;
  display: flex;
  position: relative;
}

.container > div {
  margin: 0 10px;
  flex-grow: 1;
  border-radius: 20px;
  height: 250px;
  box-sizing:border-box;
  -webkit-mask: linear-gradient(#fff,#fff);
          mask: linear-gradient(#fff,#fff);
}

.container > div::before {
  content: "";
  position: absolute;
  z-index:-1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url(https://picsum.photos/id/107/1000/800) center/cover;
}

.container > div > div {
  height:100%;
  border:2px solid #000;
  border-radius: 20px;
  text-align:center;
  box-sizing:border-box;
}

body {
  background:#f3f3f3;
}

<div class="container">
  <div>
    <div>Some</div>
  </div>
  <div>
    <div>Text</div>
  </div>
  <div>
    <div>here</div>
  </div>
</div>

body {
  margin: 0;
  padding: 10px;
  background-color: black;
}

.wrapper {
  display: grid;
  height: 100%;
  width: 320px;
  grid-template-columns: repeat(3,1fr);
  column-gap: 10px;
  grid-template-columns: auto;
}

.left {
  height: 300px;
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  background-image: url('https://www.tacoshy.de/Images/Yoshi/IMAG0735.jpg');
  background-size: cover;
  border-radius: 10px;
}

.middle {
  height: 300px;
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  background-color: red;
    background-image: url('https://www.tacoshy.de/Images/Yoshi/IMAG0735.jpg');
  background-size: cover;
  background-position: left -110px top 0;
  border-radius: 10px;
}

.right {
  height: 300px;
  grid-column: 3 / 4;
  grid-row: 1 / 2;
  background-color: red;
    background-image: url('https://www.tacoshy.de/Images/Yoshi/IMAG0735.jpg');
  background-size: cover;
  background-position: left -220px top 0;
  border-radius: 10px;
}

<body>
  <div class="wrapper">
    <div class="left"></div>
    <div class="middle"></div>
    <div class="right"></div>
  </div>
</body>

使用背景图片偏移量来做到这一点。

background-image html responsive-design

如何使3个div后面的水槽流过一个图像？

问题描述

解决方法

相关问答