色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

css背景居中自適應全屏

賈玉琴1年前5瀏覽0評論

CSS背景圖片的居中和自適應全屏是網頁設計中常見的需求。下面將對這兩種情況進行詳細介紹。

背景居中

先來看基本的背景居中:

body {
background-image: url(bg.png); 
background-position: center center; 
background-repeat: no-repeat;
}

這段代碼將背景圖片(如bg.png)放置在頁面中央。如果需要設置背景圖片的大小,可以添加如下代碼:

body {
background-image: url(bg.png); 
background-position: center center; 
background-size: cover;
background-repeat: no-repeat;
}

通過background-size: cover;可以讓背景圖完整地覆蓋整個頁面。

自適應全屏

背景自適應全屏則需要在html中添加一個背景容器,如下所示:

<div class="bg"></div>
<style>
.bg {
background-image: url(bg.png); 
background-position: center center; 
background-repeat: no-repeat;
background-size: cover;
position: fixed;
top: 0; 
left: 0;
right: 0;
bottom: 0;
}
</style>

這樣就可以實現在任何尺寸的屏幕上都能自適應全屏的背景圖了。

以上是關于CSS背景居中和自適應全屏的介紹,希望能對大家提供一些參考。