同一個標簽可以同時設(shè)置背景顏色和背景圖片,如果顏色和圖片同時存在,那么圖片會覆蓋顏色。
1.在CSS中有一個叫做background-position:屬性,就是專門用來控制背景圖片的位置
2.格式:background-position:值1 值2;
值1的取值范圍:left center right
值1代表背景圖片的水平位置
值2的取值范圍:top center bottom
值2代表背景圖片的垂直位置
值1和值2也可以設(shè)置像素值,來分別表示距離最左邊和最上邊的像素值(注意可以接受負值,也就是左上角就是坐標的原點,圖片的左上角就是坐標值的大小),記住一定要帶單位。默認值為:left top
例子:
<style>
.box{
height: 1000px;
width: 1000px;
background-image: url("image/snow.jpg");
background-repeat: no-repeat;
background-position: center center;
}
</style>
<div class="box">
</div>
專門建立的學(xué)習(xí)Q-q-u-n ⑦⑧④-⑦⑧③-零①② 分享學(xué)習(xí)方法和需要注意的小細節(jié),互相交流學(xué)習(xí),不停更新最新的教程和學(xué)習(xí)技巧(從零基礎(chǔ)開始到WEB前端項目實戰(zhàn)教程,學(xué)習(xí)工具,全棧開發(fā)學(xué)習(xí)路線以及規(guī)劃)
3.使用方式:
我們使用背景圖片,而不是使用img標簽,這是因為,當(dāng)我們使用img標簽的時候,如果圖片很大那么下面就會有滾動條,但是這種網(wǎng)頁是很垃圾的,因為展示出來首頁,就是讓大家看的,加一個滾動條很不舒服。那我們用小圖片不就得了,這其實也不行,因為我們每個人的屏幕分辨率大小都不同,因此需要一張較大的背景圖片來解決上面的問題。
本文標題:web前端入門到實戰(zhàn):Css背景定位-創(chuàng)新互聯(lián)
轉(zhuǎn)載來源:http://chinadenli.net/article24/dhjoce.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供服務(wù)器托管、品牌網(wǎng)站建設(shè)、網(wǎng)站維護、定制網(wǎng)站、企業(yè)網(wǎng)站制作、關(guān)鍵詞優(yōu)化
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容