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

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

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

實(shí)現(xiàn)該效果的關(guān)鍵在於巧妙運(yùn)用漸變和混合模式。讓我們從一個(gè)簡(jiǎn)單的HTML結(jié)構(gòu)開(kāi)始：

<div></div>

初始CSS樣式：

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

創(chuàng)建背景條紋

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

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;
}

為了簡(jiǎn)化代碼，我們可以使用自定義屬性：

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控制條紋的垂直偏移量。目前線性漸變?cè)O(shè)置為純黑色，這是為了後續(xù)的遮罩和混合效果。為了防止背景重複平鋪，我們需要設(shè)置background-repeat: no-repeat;：

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

調(diào)整條紋大小和間距

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

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

由於高度為auto，條紋會(huì)相互覆蓋。我們需要使用雙值語(yǔ)法，並設(shè)置相同的高度：

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

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

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;
  /* ... */
}

為了實(shí)現(xiàn)遮罩和混合效果，我們將<div>包裹在一個(gè)父容器中，並添加一個(gè)新的<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>在第一個(gè)<code><div>上應(yīng)用漸變色，第二個(gè)<code><div>應(yīng)用之前的條紋樣式，並使用<code>mix-blend-mode: screen;實(shí)現(xiàn)屏幕混合模式：

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

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

鼠標(biāo)懸停效果

最後，我們添加鼠標(biāo)懸停效果，使條紋寬度擴(kuò)展到容器的全部寬度：

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

最終效果如開(kāi)頭所示。 請(qǐng)注意，為了更好的用戶體驗(yàn)，建議考慮減少運(yùn)動(dòng)效果的設(shè)置，以滿足不同用戶的偏好。

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

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