在另一个元素下和下面编织一个元素

该教程展示了一种CSS技术，可以通过重叠的元素创建视觉上吸引人的编织效果。受到圣经项目网站上动画的启发，此方法使用CSS混合模式和网格来提供干净有效的解决方案。

我们从图像和旋转的框架上覆盖。

<div class="design">
  <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174468109592364.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="在另一个元素下和下面编织一个元素">
  <div class="rotated-border"></div>
</div>

初始设置的CSS：

 。设计 {
  位置：相对；
  身高：300px;
  宽度：300px;
}

.Design> * {
  位置：绝对；
  身高：100％；
  宽度：100％；
}

.Rotated-Border {
  盒子大小：边框框；
  边界：15px＃eb311f固体；
  变换：旋转（45维格）;
  盒子阴影：0 0 10px＃eb311f，插图0 0 20px＃eb311f;
}

红色框架是使用border属性创建的。 box-sizing: border-box确保旋转后框架保持焦点。

接下来，我们使用图像和CSS混合模式的副本来选择性地揭示基础图像和框架的部分。我们通过将白色网格单元覆盖以掩盖图像的一部分来实现这一目标。

HTML结构扩展了：

<div class="design">
  <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174468109592364.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="在另一个元素下和下面编织一个元素">
  <div class="rotated-border"></div>
  <div class="blend">
    <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174468109592364.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="在另一个元素下和下面编织一个元素">
    <div class="grid">
      <div></div>
      <div data-white></div>
      <div data-white></div>
      <div></div>
    </div>
  </div>
  <div class="blend2">
    <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174468109592364.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="在另一个元素下和下面编织一个元素">
    <div class="grid2">
      <div data-white></div>
      <div></div>
      <div></div>
      <div data-white></div>
    </div>
  </div>
</div>

CSS进行混合和网格：

 .blend，.blend2 {
  位置：绝对；
  身高：100％；
  宽度：100％；
  混合模式：乘法；
}

.grid，.grid2 {
  显示：网格；
  网格板柱：重复（2，1fr）;
  网格板行：重复（2，1fr）;
  位置：绝对；
  身高：100％；
  宽度：100％；
}

[data-white] {
  背景色：白色；
}

mix-blend-mode: multiply;创建透明效果。网格从战略上定位白色盒子，以掩盖旋转框架的不必要部分。添加第二个网格和图像（ blend2 ）以恢复所需区域中的白色。

这种分层和混合模式组合会产生编织效果。虽然CSS屏蔽可能是替代方案，但混合模式可提供更好的浏览器兼容性和更简单的使用网格实现。为了方便起见，选择象限的网格是为了方便的。也可以使用Flexbox或其他方法。 data-white属性是清洁剂HTML的风格选择。其他混合模式（例如screen ， darken或lighten也可以通过调整网格单元格的颜色来实现相似的结果。

以上是在另一个元素下和下面编织一个元素的详细内容。更多信息请关注PHP中文网其他相关文章！