如何模糊背景影像而不影響內容清晰度？

在不影響內容的情況下創建背景圖像模糊

在此示例中，目標是在不影響背景圖像清晰度的情況下模糊背景圖像內容（在本例中為span 元素）。

問題

使用 CSS 將模糊效果套用於背景圖片時，元素內的內容也會模糊。這對保持文字或其他內容的可讀性提出了挑戰。

解

為了達到所需的效果，可以使用 CSS 偽類。 :before 偽類非常適合這種情況。操作方法如下：

1. 將內容包裝在特定類別中（例如「blur-bgimage」）：

<code class="html"><div class="blur-bgimage">
  <span>Main Content</span>
</div></code>

2. 設定樣式：類別中的before偽元素模仿背景影像並套用模糊效果：

<code class="css">.blur-bgimage:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: inherit;
  z-index: -1;
  filter: blur(10px);  // Adjust the blur radius as desired
  transition: all 2s linear;
}</code>

3. :before 偽元素覆蓋內容，繼承背景影像並套用模糊效果。負 z-index 將其置於內容後面。
4. 將 Blur-bgimage 類別新增至父容器會觸發模糊效果，而刪除它會恢復原始清晰度。

這個方法有效地模糊背景影像，同時保持元素內內容的清晰度。

以上是如何模糊背景影像而不影響內容清晰度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！