多CSS背景設置爲覆蓋50％100％大小（並修復！）

固定背景單個圖像？ ✔
固定背景，單幅圖像，縮放和居中？ ✔
兩個背景，每邊50％？ ✔
三種背景，每種33％，封面樣式縮放，同時也是100％的高度？ ✘

我需要背景圖像，每個佔用佈局像這樣屏幕的33％：多CSS背景設置爲覆蓋50％100％大小（並修復！）

11111|22222|33333 
11111|22222|33333 
11111|22222|33333 
11111|22222|33333 
11111|22222|33333

此背景需要被固定的，因爲其他的東西在上邊滑動的。我已經成功地還挺得到這個工作有兩個背景圖像有以下：

.multiple-background { 
    background-color: transparent; 
    background-image: url("img1.jpg"), url("img2.jpg"); 
    background-repeat: no-repeat, no-repeat; 
    background-attachment: fixed, fixed; 
    background-clip: border-box, border-box; 
    background-origin: padding-box, padding-box; 
    background-size: 50% 100%; 
    background-position: left top, right top; 
}

可惜這綿延的背景圖像。我需要的東西可以讓我修復圖像佔用的水平空間量（33％），同時還可以實現100％的寬度和覆蓋樣式縮放。

切換像background-size: 50% auto;這樣的東西可以正確縮放，但現在它不覆蓋整個背景。

來源

2014-02-11 Josh K

我不認爲你可以做到這一點'背景size'設置位置絕對和z-index值。 'contains'，'cover'和'auto' * all *僅根據其固有比例縮放圖像。 – BoltClock

注意，如果某個背景屬性對於所有背景都具有相同的值，則可以只指定一次，並將其傳播到其餘背景。這意味着'background-attachment：fixed'相當於'background-attachment：fixed，fixed'，例如'background-clip'，'background-origin'和'background-repeat'也是如此。 – BoltClock

@BoltClock我從FF的檢查器中複製了這個，所以這就是擴展的CSS。好的提示，但！ –

每個背景使用differenet元素和訂貨

來源

2014-02-11 04:23:23

多CSS背景設置爲覆蓋50％100％大小（並修復！）

回答

相關問題