background-repeat：repeat-y;起始位置CSS

我在一個div中使用2個背景。頂部有一個靜態的高度和寬度，它不重複，但它有一個透明度。底部是1px高度的白線，需要重複-y。但是因爲repeat-y佔據了包含div的整個高度。它也在透明背景圖像背後。是否有可能使底部圖像只在頂部背景下開始重複，而不是在左上方重複？background-repeat：repeat-y;起始位置CSS

哦，我只允許觸摸Css文件，因此添加div是不行的。

.box_area { 
    width:925px; 
    background: url(../../images/verloop.png), url(../../images/whiteback.png); 
    background-position: 0px 0px, 0px 284px; 
    background-repeat: no-repeat, repeat-y; 
    padding-left:25px; 
    margin-left: 25px; 
    padding-right:7px; 
    float:left; 
}

這就是我現在的情況，但背景位置此刻不做任何事情。

任何人都可以幫助我嗎？

來源

2014-02-26 Goos van den Bekerom

你可以爲此設置一個JSfiddle嗎？ –

檢查CSS屬性'background-size'。 – Pugazh

我可以嘗試，但我無法觸摸HTML文件。喜歡重建的情況相當困難：P –

您可以使用:before選擇器添加一個僞元素並對其進行定位和設置，以便獲得您提到的第二個背景。假設518px是第一個背景的高度，這裏是樣本CSS以將第二個背景放置在第一個背景之下。

.box_area { 
    width:925px; 
    background: url(../../images/verloop.png); 
    background-position: 0px 0px, 0px 284px; 
    background-repeat: no-repeat; 
    padding-left:25px; 
    margin-left: 25px; 
    padding-right:7px; 
    float:left; 
    position: relative; 
} 
.box_area:before { 
    content: ""; 
    height: calc(100% - 518px); 
    width: 100%; 
    background: url(../../images/whiteback.png); 
    background-repeat: repeat-y; 
    display: block; 
    position: absolute; 
    top: 518px; 
    z-index: -1; 
    margin-left:-25px; /* This is to counter the 25px left-padding in .box-container div */ 
}

來源

2014-02-26 14:34:38

與一點改變這工作相當不錯，但100％的高度需要屏幕的高度，而不是內容。所以如果我們的cms創建更高的內容，背景將停止。任何想法？ –

如果你爲僞元素指定'height：100％'，它將會生成第二個元素，其高度與「.box_area」元素的高度相同（我猜這就是爲什麼當內容少時你會看到它佔據整個屏幕）。但是，當我們指定'top：518px'時，即將這個僞元素518px放置在「.box_area」元素頂部下方，我指定518px低於100％，'height：calc（100％ - 518px）;'。請注意，我假定518px爲verloop.png的高度。在上述兩處將該數字替換爲該圖像的實際高度。 –

background-repeat：repeat-y;起始位置CSS

回答

相關問題