web前端入門到實(shí)戰(zhàn)：Css背景定位-創(chuàng)新互聯(lián)

同一個(gè)標(biāo)簽可以同時(shí)設(shè)置背景顏色和背景圖片，如果顏色和圖片同時(shí)存在，那么圖片會(huì)覆蓋顏色。

成都創(chuàng)新互聯(lián)是一家專注于成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)與策劃設(shè)計(jì),藍(lán)山網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)十載,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:藍(lán)山等地區(qū)。藍(lán)山做網(wǎng)站價(jià)格咨詢:028-86922220

1.在CSS中有一個(gè)叫做background-position：屬性，就是專門用來控制背景圖片的位置

2.格式：background-position:值1 值2；

值1的取值范圍：left center right

值1代表背景圖片的水平位置

值2的取值范圍：top center bottom

值2代表背景圖片的垂直位置

值1和值2也可以設(shè)置像素值，來分別表示距離最左邊和最上邊的像素值(注意可以接受負(fù)值，也就是左上角就是坐標(biāo)的原點(diǎn)，圖片的左上角就是坐標(biāo)值的大小)，記住一定要帶單位。默認(rèn)值為：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í)方法和需要注意的小細(xì)節(jié)，互相交流學(xué)習(xí)，不停更新最新的教程和學(xué)習(xí)技巧（從零基礎(chǔ)開始到WEB前端項(xiàng)目實(shí)戰(zhàn)教程，學(xué)習(xí)工具，全棧開發(fā)學(xué)習(xí)路線以及規(guī)劃）

3.使用方式：

我們使用背景圖片，而不是使用img標(biāo)簽，這是因?yàn)椋?dāng)我們使用img標(biāo)簽的時(shí)候，如果圖片很大那么下面就會(huì)有滾動(dòng)條，但是這種網(wǎng)頁是很垃圾的，因?yàn)檎故境鰜硎醉?，就是讓大家看的，加一個(gè)滾動(dòng)條很不舒服。那我們用小圖片不就得了，這其實(shí)也不行，因?yàn)槲覀兠總€(gè)人的屏幕分辨率大小都不同，因此需要一張較大的背景圖片來解決上面的問題。

本文標(biāo)題：web前端入門到實(shí)戰(zhàn)：Css背景定位-創(chuàng)新互聯(lián)
轉(zhuǎn)載來源：http://www.muchs.cn/article24/dhjoce.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、品牌網(wǎng)站建設(shè)、網(wǎng)站維護(hù)、定制網(wǎng)站、企業(yè)網(wǎng)站制作、關(guān)鍵詞優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)