如何让一张图片在 3 个带间距的 div 后面流动？

Question

我正在尝试找出最好的方式来显示三个间隔开的 div，并在它们后面流动相同的图像。

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

我的第一次尝试是在 3 个 div 后面放置一个图像 3 个 div 将有一个“:after”伪元素，该元素具有深色背景虚线设计，因此它覆盖了否则会看到的彩色图像。

看图：（伪元素现在还不完美，但我相信你明白了……我也给这件作品加了阴影以便于查看……）

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

有什么想法吗？是否有适用于此处的背景剪辑属性？

Answer 1

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>

使用背景图像偏移来完成。

Answer 2

这是一个使用 pseudo-element 和 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>

如何让一张图片在 3 个带间距的 div 后面流动？

How to have one image flow behind 3 divs with gutters?

html

css

background-image

responsive-design