App下載

CSS怎么設(shè)置背景圖片自適應(yīng)全屏？附源碼！

猿友 2021-05-19 12:02:22 瀏覽數(shù) (9167)
反饋

不少同學(xué)在設(shè)置網(wǎng)站背景圖片時(shí)會(huì)遇到這么一個(gè)問(wèn)題：背景圖片總是不能鋪滿整個(gè)屏幕，不是圖片太小就是圖片被過(guò)度放大，顯得不太美觀。那么 CSS 怎么設(shè)置背景圖片自適應(yīng)全屏呢？這篇文章告訴你。

實(shí)現(xiàn)效果：

CSS設(shè)置背景圖片自適應(yīng)全屏

源碼：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>CSS設(shè)置背景圖片自適應(yīng) - 編程獅(w3cschool.cn)</title>
	<style type="text/css"> 
		body{
		    position:fixed;
                    top: 0;
                    left: 0;
		    width:100%;
		    height:100%;
                    min-width: 1000px;
                    background: url(./image/img1.png);/*圖片路徑*/
                    background-repeat: no-repeat;
                    background-size: cover;
                    -webkit-background-size: cover;
                    -o-background-size: cover;
                    background-position: center 0;
		}
	</style>
</head>
<body>
</body>
</html>

實(shí)現(xiàn)原理：

首先固定背景圖片在屏幕的最上方和最左方。其次將 height 和 width 的值都設(shè)置為 100%，還需要設(shè)置 min-width，這是為了實(shí)現(xiàn)屏幕寬度在 1000px 以內(nèi)時(shí)保持圖片大小不變。最后還需要設(shè)置背景圖片不重復(fù)（no-repeat）。

以上就是文章“CSS 怎么設(shè)置背景圖片自適應(yīng)全屏？附源碼！”的全部?jī)?nèi)容。想要了解更多 CSS 資料請(qǐng)關(guān)注 w3cschool。

CSS

1 人點(diǎn)贊