让一个div背景使用Bootstrap入侵其他div答案

【问题标题】：Let a div background to invade others divs using Bootstrap让一个div背景使用Bootstrap入侵其他div
【发布时间】：2022-02-01 06:35:14
【问题描述】：

我想实现一种油漆与另一油漆相结合的效果。

我有 4 列，每列有 1 个 splat 背景，有没有办法让 1 个容器的背景干扰其他容器以显示随机 splat 图案？

这就是我想要得到的：

这是我得到的：

section#splat {
  background: #010318;
}

.tag-foto {
  background: url(https://i.stack.imgur.com/bevwr.png);
  height: 410px;
  background-position-x: center;
  background-position-y: center;
  width: 290px;
}

.tag-foto-2 {
  background: url(https://i.stack.imgur.com/yIwOh.png);
  height: 410px;
  background-position-x: center;
  background-position-y: center;
  width: 290px;
}

.tag-foto-3 {
  background: url(https://i.stack.imgur.com/8ledX.png);
  height: 410px;
  background-position-x: center;
  background-position-y: center;
  width: 290px;
}

.tag-foto-4 {
  background: url(https://i.stack.imgur.com/qwMFz.png);
  height: 410px;
  background-position-x: center;
  background-position-y: center;
  width: 290px;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<section id="splat">
  <div class="container">
    <div class="row">
      Title
    </div>

    <div class="row">
      <div class="col-md-3">
        <div class="tag-foto">

        </div>
        <p class="region-artista text-center">Text</p>
      </div>

      <div class="col-md-3 ">
        <div class="tag-foto-2">

        </div>
        <p class="region-artista text-center">text</p>
      </div>

      <div class="col-md-3">
        <div class="tag-foto-3">

        </div>
        <p class="region-artista text-center">text</p>
      </div>

      <div class="col-md-3">
        <div class="tag-foto-4">

        </div>
        <p class="region-artista text-center">text</p>
      </div>
    </div>
  </div>
</section>

【问题讨论】：

@isherwood，你能向我解释更多关于源值的信息吗？你的意思是 CSS 上的图片没有显示？
哦，对不起，你是对的，我正准备把它们放在那里，但是，为了这个问题，我没有包括它们，让我删除它们，因为它会导致混乱

标签： html css bootstrap-4

【解决方案1】：

我已经演示了mix-blend-mode 的一些最相关的值。

与背景颜色相匹配的嵌入框阴影也有助于柔化图像的边缘。

section#splat {
  background: #010318;
}

.tag-foto {
  background-image: url(https://i.stack.imgur.com/bevwr.png);
  height: 410px;
  background-position-x: center;
  background-position-y: center;
  aspect-ratio: 267 / 304;
  box-shadow: 0 0 32px 4px #010318 inset;
  mix-blend-mode: lighten;
  border-radius: 25%;
}

.tag-foto-2 {
  background-image: url(https://i.stack.imgur.com/yIwOh.png);
  height: 410px;
  background-position-x: center;
  background-position-y: center;
  aspect-ratio: 267 / 304;
  box-shadow: 0 0 32px 4px #010318 inset;
  mix-blend-mode: lighten;
}

.tag-foto-3 {
  background-image: url(https://i.stack.imgur.com/8ledX.png);
  height: 410px;
  background-position-x: center;
  background-position-y: center;
  aspect-ratio: 267 / 304;
  mix-blend-mode: lighten;
}

.tag-foto-4 {
  background-image: url(https://i.stack.imgur.com/qwMFz.png);
  height: 410px;
  background-position-x: center;
  background-position-y: center;
  aspect-ratio: 267 / 304;
  mix-blend-mode: screen;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<section id="splat">
  <div class="container">
    <div class="row">
      Title
    </div>
    <div class="row">
      <div class="col-md-3">

        <div class="tag-foto">
          <img src="" alt="" class="sello-foto">
        </div>
        <p class="region-artista text-center">Text</p>
      </div>
      <div class="col-md-3">

        <div class="tag-foto-2">
          <img src="" alt="" class="sello-foto">
        </div>
        <p class="region-artista text-center">text</p>
      </div>
      <div class="col-md-3">

        <div class="tag-foto-3">
          <img src="" alt="" class="sello-foto">
        </div>
        <p class="region-artista text-center">text</p>
      </div>
      <div class="col-md-3">

        <div class="tag-foto-4">
          <img src="" alt="" class="sello-foto">
        </div>
        <p class="region-artista text-center">text</p>
      </div>
    </div>
  </div>
</section>

【讨论】：

运行代码sn-p并点击整页查看重叠飞溅的效果。示例中的固定图像大小并不能使它成为最好的演示，但我试图将注意力集中在这个问题上。
我现在看到了。变化很微妙，但很好。少量的飞溅物重叠。我想我没有得到问题所要求的内容。
感谢您的回答，这不是我想要的，但是如果我找不到任何其他方法，我将使用您的解决方案。