時間：2023-07-24 22:33:01 | 來源：網(wǎng)站運營
時間：2023-07-24 22:33:01 來源：網(wǎng)站運營
css如何設(shè)置背景圖片？background屬性添加背景圖片：在前端開發(fā)過程中，為了頁面的美觀，往往都會給html頁面添加背景圖片。那么如何利用css設(shè)置html中用圖片做背景？本章就給大家介紹css怎樣設(shè)置背景圖片。有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。background-color： 規(guī)定要使用的背景顏色。這樣在url()里給出圖片的路徑，就可以給div盒子設(shè)置一個背景圖片；看似簡單，但有一點要注意，設(shè)置背景圖片的盒子必須要有實質(zhì)的寬度與高度，這樣才可以讓背景圖片在顯示屏上顯示。
background-position： 規(guī)定背景圖像的位置。
background-size： 規(guī)定背景圖片的尺寸。
background-repeat ：規(guī)定如何重復(fù)背景圖像。
background-origin ：規(guī)定背景圖片的定位區(qū)域。
background-clip： 規(guī)定背景的繪制區(qū)域。
background-attachment： 規(guī)定背景圖像是否固定或者隨著頁面的其余部分滾動。
background-image ：規(guī)定要使用的背景圖像。
可以看出background-image屬性就是給html頁面設(shè)置背景圖片的屬性，下面看看它的用法
1background-image:url(1.jpg);
<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<title>背景圖片設(shè)置</title>
<style>
.demo{
position:fixed;
top: 0;
left: 0;
width:100%;
height:100%;
min-width: 1000px;
z-index:-10;
zoom: 1;
background-color: #fff;
background: url(2.png);
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-position: center 0;
}
</style>
</head>
<body>
<divclass="demo"></div>
</body>
</html>
position:fixed;這三句是讓整個div.demo盒子固定在屏幕的最上方和最左方。
top: 0;
left: 0;
width:100%;這是讓整個div跟屏幕實現(xiàn)一模一樣的大小，從而達到全屏效果。
height:100%;
1min-width: 1000px;min-width是為了實現(xiàn)讓屏幕寬度在1000px以內(nèi)時，div的大小保持不變，也就是說在這種情況下，縮放屏幕寬度時，圖片不要縮放（只有在1000px以內(nèi)才有效）。
1z-index:-10;這個是讓整個div在HTML頁面中處在各個層級的下方，正常情況下，第一個創(chuàng)建的層級z-index的值是0，所以如果我們這里寫成-1也可以實現(xiàn)，不過這里寫-10是確保整個div在最下面，因為如果頁面中層級太多了，有的時候用-1不一定在最下面，但如果寫成-100這樣大數(shù)字的也沒有什么意義。用index:-10 以此能達到看上去像背景圖片，其實是一個最普通的div，只是層級關(guān)系變了，才讓人看上去看是背景圖片。
1background-repeat: no-repeat;這個css樣式是設(shè)置背景圖片不要重復(fù)的；例子中的是一張大圖，如果是一張純色（或伴有點狀/條紋狀）的圖片，可以讓圖片平鋪（重復(fù)）到整個屏幕上，達到全屏效果。（repeat-x是設(shè)置橫向平鋪、repeat-y是設(shè)置豎向平鋪）
<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<title>背景圖片設(shè)置</title>
<style>
.demo{
width: 600px;
height: 200px;
background:url(1.jpg) no-repeat;
}
.demo1{
width: 100%;
height: 100%;
background-color: rgba(255,255,255,0.5);
}
</style>
</head>
<body>
<divclass="demo">
<divclass="demo1"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<title>背景圖片設(shè)置</title>
<style>
.demo{
width: 600px;
height: 200px;
background:url(1.jpg) no-repeat;
}
.demo1{
width: 100%;
height: 100%;
background-color: rgba(255,255,255,0.5);
}
</style>
</head>
<body>
<divclass="demo">
<divclass="demo1"></div>
</div>
</body>
</html>
關(guān)鍵詞：圖片,背景,屬性,設(shè)置
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
在線咨詢