在另一個元素下和下面編織一個元素

該教程展示了一種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中文網其他相關文章！