在開發網站過程中，經常需要設置背景長度，使頁面看起來更加美觀。CSS樣式背景長度變寬，是一種常用的實現方式。下面我們就來看看具體實現方法。

// HTML代碼
<div class="container">
<p>這是一段文字，用來展示背景長度變寬的效果</p>
</div>
// CSS樣式
.container {
background-color: #eee;
padding: 20px;
}
.container p {
background-color: #fff;
padding: 10px;
margin-bottom: 20px;
position: relative;
}
.container p:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 5px;
background-color: #333;
}

在上面的代碼中，我們通過設置偽元素:before來實現背景長度變寬的效果。首先，我們給包括文字的p標簽設置了一個白色的背景和一些邊距。然后，我們使用偽元素:before來模擬出一個背景的條紋，并將其設置為黑色。在這里，我們使用了絕對定位，保證了這個條紋不會影響到文字的位置。

最后，我們需要注意的是，在設置偽元素:before時，我們將它的寬度設置為100%，這個百分比是相對于包含它的DIV寬度來計算的。這保證了條紋的寬度可以隨著DIV寬度的變化而變化，從而實現了背景長度變寬的效果。