即使圖像尺寸小於頁面，也會將背景圖像拉伸到窗口的整個寬度？

是否有可能增加背景圖像的尺寸超出尺寸以填充頁面。我知道會有一些模糊，但這是可以的。即使圖像尺寸小於頁面，也會將背景圖像拉伸到窗口的整個寬度？

例如，如果我的圖像寬度爲1000像素，我怎樣才能讓它伸展超過其寬度以填滿屏幕。

2017-01-23 Jack Cash

嘗試

background-size: 100%

或

background-size: cover

這是一個常見的實現。

html, body { 
 
    height: 100%; 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
body { 
 
    background-image: url('http://placehold.it/150x150'); 
 
    background-repeat: no-repeat; 
 
    background-position: center center; 
 
    background-size: cover; 
 
}

來源

2017-01-23 20:30:28 user2867288

我會必不可少想找出一種方法來這兩個屬性的組合。 background-size：封面以真實寬度停止圖像。背景大小：100％不一定能填滿整個div的高度。 –

如果容器大於圖像，'background-size：cover'會將圖像拉伸到其容器的寬度。 – user2867288

https://jsfiddle.net/h0zn523q/ – user2867288

設置圖像作爲背景，並使用background-size，background-position，並background-repeat屬性：

background-size: 100%; 
background-position: center; 
background-repeat: no-repeat;

來源

2017-01-23 20:30:13

background-size: 100%; 
background-position: center; 
background-repeat: no-repeat;

來源

2017-01-23 20:36:10 Michael

使用background-size: cover;

#content { 
 
    
 
    width: 600px; 
 
    height: 300px; 
 
    border: 2px solid #333; 
 
    background: #ddd url(http://lorempixel.com/400/200/nightlife/) no-repeat center center; 
 

 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
    
 
}

<div id="content"> 
 
</div>

來源

2017-01-23 20:37:18

即使圖像尺寸小於頁面，也會將背景圖像拉伸到窗口的整個寬度？

回答

相關問題