CSS代碼怎么把小圖片設(shè)為背景圖

01

創(chuàng)新互聯(lián)公司主要從事網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)阜城,十余年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18980820575

首先看下html代碼，一個(gè)空的div，什么內(nèi)容都還沒放上。

02

為這個(gè)div寫上一些美化的樣式。

03

刷新頁面，看下效果，現(xiàn)在就是顯示一個(gè)有邊框的div。

04

要用css為這個(gè)div加上背景圖片，只需要加上background-image的樣式，后面的值就是圖片的地址了。

background-image: url(12.jpg);

05

刷新頁面看下現(xiàn)在的效果，可以看到div已經(jīng)加上圖片背景了。

CSS中的背景圖片的知識(shí)點(diǎn)深度

在理解css的背景圖片之前需要清楚兩個(gè)問題，在什么情況下去使用css的背景圖片？又在什么情況下去使用img標(biāo)簽的內(nèi)容圖片？html中專門有一個(gè)img標(biāo)簽用于向頁面中去插入內(nèi)容圖片，那么如何區(qū)分這兩種情況呢？

網(wǎng)頁中可以使用很多的圖片格式，下面簡(jiǎn)單的列舉一些：

background-position 屬性既可以使用關(guān)鍵字，也可以使用像素、em、百分比，最簡(jiǎn)單的情況下：可以給兩個(gè)值，一個(gè)表示相對(duì)于左側(cè)的偏移量，一個(gè)表示相對(duì)于頂部的偏移量。

calc()可以讓瀏覽器代替你計(jì)算任何數(shù)值，包括（角度、像素、百分比等），甚至還支持混合單位的計(jì)算，非常強(qiáng)大，比如：你使用的頁面布局為百分比布局，但是在UI設(shè)計(jì)稿中又需要去進(jìn)行20px的偏移，那么就可以寫成“calc(100% + 20px)”。

同樣的，背景圖片右側(cè)定位的問題也可以使用calc()去處理，比如：左側(cè)為文本內(nèi)容，右側(cè)icon圖標(biāo)的定位。

默認(rèn)的情況下，背景圖片是繪制在元素邊框以內(nèi)的，如果把圖片定位到邊框的下方，而邊框又被設(shè)置為半透明，那么圖片邊緣就會(huì)出現(xiàn)半透明的邊框，使用background-clip屬性可以處理這種情況，background-clip：border-box將其改為padding-box就可以把圖片剪裁到內(nèi)邊距盒子內(nèi)，content-box值會(huì)把圖片位于內(nèi)邊距及其之外的部分剪裁掉。

背景會(huì)附著在指定的元素后面，如果滾動(dòng)頁面，那么背景也會(huì)隨著頁面的滾動(dòng)而滾動(dòng)，通過background-attachment屬性改變這種行為。

除了fixed和默認(rèn)值scroll，還可以把background-attachment設(shè)為local，它與scroll的區(qū)別在于，scroll會(huì)讓圖片相對(duì)于元素本身固定，而local會(huì)讓背景圖片相對(duì)于元素中的內(nèi)容固定，也就是元素設(shè)置了固定大小，overflow設(shè)置了auto或scroll，則元素內(nèi)部?jī)?nèi)容滾動(dòng)顯示時(shí)，圖片會(huì)隨之滾動(dòng)。

background-size明確指定一個(gè)值，可以重新設(shè)置圖片大小，也可以讓它隨著元素大小縮放.

如果希望圖片隨著元素的縮放而縮放，則必須設(shè)置為百分比的形式，不過，百分比設(shè)置時(shí)不是相對(duì)于圖片固有的大小，而是相對(duì)于容器的大小，如果給圖片的寬高都加以百分比的形式處理，那么會(huì)導(dǎo)致圖片產(chǎn)生變形。

還有一個(gè)屬性值contain，這個(gè)值會(huì)讓瀏覽器盡可能的保持圖片的最大化，同時(shí)不改變圖片的寬高比，瀏覽器決定哪一邊使用auto。

另一個(gè)屬性值為cover，意思是圖片會(huì)縮放，覆蓋整個(gè)元素，同時(shí)不會(huì)變形，如果在一個(gè)高而窄的元素中，元素高度會(huì)填滿，但是圖片的兩邊會(huì)被切除掉。

css背景樣式怎么設(shè)置

div{

background: #fff000;

font-size: 30px;

border:10px dashed #0000ff;

padding:20px;

background-image: url("../../image/icon.png");

background-repeat:no-repeat;

}

.div2{

margin-top:30px;

background-origin: content-box;

background-clip: content-box;

}

background-clip:規(guī)定背景的繪制區(qū)域

background-origin:相對(duì)于內(nèi)容框來定位背景圖像

background-image：背景圖片

background-repeat:背景圖片師傅平鋪重復(fù)

background-size：圖片大小，適應(yīng)獨(dú)，屬性值有cover，百分比，等