如何巧妙運用CSS background-size屬性創(chuàng)建炫酷的背景條紋？本文將分享一個案例，演示如何通過CSS漸變、混合模式和background-size屬性實現(xiàn)鼠標懸停時背景條紋過渡的視覺效果。

通常，我們使用background-size: cover來讓背景圖片填充整個元素。但這個案例需要更高級的背景大小控制：鼠標懸停時過渡的背景條紋。效果如下（請將鼠標懸停在以下區(qū)域）：

(此處應插入動態(tài)效果演示，與原文效果一致)

實現(xiàn)該效果的關鍵在於巧妙運用漸變和混合模式。讓我們從一個簡單的HTML結構開始：

<div></div>

初始CSS樣式：

div {
  width: 500px;
  height: 500px;
  background: palegreen;
}

創(chuàng)建背景條紋

我們可以使用CSS線性漸變來創(chuàng)建條紋。由於條紋寬度不均且需要過渡效果，我們不能直接使用重複漸變。這裡，我們通過疊加五個線性漸變背景來模擬五條條紋，並將它們定位到容器的右上角：

div {
  width: 500px;
  height: 500px;
  background: 
    linear-gradient(black, black) top right,
    linear-gradient(black, black) top 100px right,
    linear-gradient(black, black) top 200px right,
    linear-gradient(black, black) top 300px right,
    linear-gradient(black, black) top 400px right, 
    palegreen;
}

為了簡化代碼，我們可以使用自定義屬性：

div {
  --gt: linear-gradient(black, black);
  --n: 100px;

  width: 500px;
  height: 500px;
  background: 
    var(--gt) top right,
    var(--gt) top var(--n) right,
    var(--gt) top calc(var(--n) * 2) right,
    var(--gt) top calc(var(--n) * 3) right,
    var(--gt) top calc(var(--n) * 4) right, 
    palegreen;
}

--gt表示漸變，--n控制條紋的垂直偏移量。目前線性漸變設置為純黑色，這是為了後續(xù)的遮罩和混合效果。為了防止背景重複平鋪，我們需要設置background-repeat: no-repeat;：

div {
  /* ... */
  background-repeat: no-repeat;
}

調整條紋大小和間距

目前條紋重疊在一起，幾乎看不出來。我們需要使用background-size屬性來設置條紋的寬度和高度。 background-size屬性支持雙值語法，我們可以分別設置寬度和高度。以下代碼設置了每個條紋的寬度，高度使用默認值auto：

div {
  /* ... */
  background-size: 60%, 90%, 70%, 40%, 10%;
}

由於高度為auto，條紋會相互覆蓋。我們需要使用雙值語法，並設置相同的高度：

div {
  /* ... */
  background-size: 60% var(--n), 90% var(--n), 70% var(--n), 40% var(--n), 10% var(--n);
}

為了在條紋之間添加間距，我們可以稍微減小每個條紋的高度：

div {
  --h: calc(var(--n) - 5px);
  /* ... */
  background-size: 60% var(--h), 90% var(--h), 70% var(--h), 40% var(--h), 10% var(--h);
}

遮罩和混合模式

將背景色改為白色：

div {
  /* ... */
  background: 
    var(--gt) top right,
    var(--gt) top var(--n) right,
    var(--gt) top calc(var(--n) * 2) right,
    var(--gt) top calc(var(--n) * 3) right,
    var(--gt) top calc(var(--n) * 4) right, 
    #fff;
  /* ... */
}

為了實現(xiàn)遮罩和混合效果，我們將<div>包裹在一個父容器中，並添加一個新的<code><div>： <pre class="brush:php;toolbar:false"><section> &lt;div&gt;&lt;/div&gt; &lt;div&gt;&lt;/div&gt; </section></pre> <p>使用CSS Grid佈局：</p> <pre class="brush:php;toolbar:false">section { display: grid; align-items: center; justify-items: center; width: 500px; height: 500px; } section &gt; div { width: inherit; height: inherit; grid-area: 1 / 1; }</pre> <p>在第一個<code><div>上應用漸變色，第二個<code><div>應用之前的條紋樣式，並使用<code>mix-blend-mode: screen;實現(xiàn)屏幕混合模式：

div:nth-child(1) { 
  background: linear-gradient(to right, red, orange); 
}

div:nth-child(2)  {
  /* ... previous styles ... */
  mix-blend-mode: screen;
}

鼠標懸停效果

最後，我們添加鼠標懸停效果，使條紋寬度擴展到容器的全部寬度：

section:hover > div:nth-child(2){
  background-size: 100% var(--h);
  transition: background-size 1s;
}

最終效果如開頭所示。 請注意，為了更好的用戶體驗，建議考慮減少運動效果的設置，以滿足不同用戶的偏好。

這個方法具有良好的可維護性和可定制性，您可以輕鬆更改條紋的高度、顏色和方向等。

希望這個案例能幫助您更好地理解和運用CSS background-size屬性。如果您有其他實現(xiàn)方法，歡迎在評論區(qū)分享！