css插入背景圖片的樣式

背景圖如果位置是0,0 就相當(dāng)于背景圖以左上角為原始位置貼上去。

成都創(chuàng)新互聯(lián)公司堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)、成都外貿(mào)網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的漳縣網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

但是如果我要這個(gè)背景圖的下方的比如QQ作為背景圖，那么這個(gè)背景圖就要往上移，看上去大概在35個(gè)像素左右。

往上移了就相當(dāng)于這張圖離原始位置偏移了-35px，左右沒偏移，所以新位置是(-35 0)

這個(gè)數(shù)值，要看這張背景圖的組合，看這個(gè)需要的圖標(biāo)，距離頂端的位置有多大，背景圖距上位置就負(fù)的多大。 同理向左向右。

背景 圖片顯示CSS樣式集合+注釋

這是我用的圖片樣式參考，你可以在有用的地方用。

/*-==背景圖片樣式==-*/

/* 平鋪 */

.uxjy_ltth_jofi1{background-position:left top;}/* 左上 */

.uxjy_ltth_jofi2{background-position:left;}/* 左中 */

.uxjy_ltth_jofi3{background-position:left bottom;}/* 左下 */

.uxjy_ltth_jofi4{background-position:center top;}/* 中上 */

.uxjy_ltth_jofi5{background-position:center;}/* 中中 */

.uxjy_ltth_jofi6{background-position:center bottom;}/* 中下 */

.uxjy_ltth_jofi7{background-position:right top;}/* 右上 */

.uxjy_ltth_jofi8{background-position:right;}/* 右中 */

.uxjy_ltth_jofi9{background-position:right bottom;}/* 右下 */

/* 橫向平鋪 */

.uxjy_ltth_jofi_x1{background-repeat: repeat-x; background-position:left top;}/* 橫向左上 */

.uxjy_ltth_jofi_x2{background-repeat: repeat-x; background-position:left;}/* 橫向左中 */

.uxjy_ltth_jofi_x3{background-repeat: repeat-x; background-position:left bottom;}/* 橫向左下 */

.uxjy_ltth_jofi_x4{background-repeat: repeat-x; background-position:center top;}/* 橫向中上 */

.uxjy_ltth_jofi_x5{background-repeat: repeat-x; background-position:center;}/* 橫向中中 */

.uxjy_ltth_jofi_x6{background-repeat: repeat-x; background-position:center bottom;}/* 橫向中下 */

.uxjy_ltth_jofi_x7{background-repeat: repeat-x; background-position:right top;}/* 橫向右上 */

.uxjy_ltth_jofi_x8{background-repeat: repeat-x; background-position:right;}/* 橫向右中 */

.uxjy_ltth_jofi_x9{background-repeat: repeat-x; background-position:right bottom;}/* 橫向右下 */

/* 縱向平鋪 */

.uxjy_ltth_jofi_y1{background-repeat: repeat-y; background-position:left top;}/* 縱向左上 */

.uxjy_ltth_jofi_y2{background-repeat: repeat-y; background-position:center top;}/* 縱向中上 */

.uxjy_ltth_jofi_y3{background-repeat: repeat-y; background-position:right top;}/* 縱向右上 */

.uxjy_ltth_jofi_y4{background-repeat: repeat-y; background-position:left;}/* 縱向左中 */

.uxjy_ltth_jofi_y5{background-repeat: repeat-y; background-position:center;}/* 縱向中中 */

.uxjy_ltth_jofi_y6{background-repeat: repeat-y; background-position:right;}/* 縱向右下 */

.uxjy_ltth_jofi_y7{background-repeat: repeat-y; background-position:left bottom;}/* 縱向左下 */

.uxjy_ltth_jofi_y8{background-repeat: repeat-y; background-position:center bottom;}/* 縱向中下 */

.uxjy_ltth_jofi_y9{background-repeat: repeat-y; background-position:right bottom;}/* 縱向右下 */

/* 單一 */

.uxjy_ltth_jofi_h1{background-repeat: no-repeat; background-position:left top;}/* 單圖上左 */

.uxjy_ltth_jofi_h2{background-repeat: no-repeat; background-position:center top;}/* 單圖上中 */

.uxjy_ltth_jofi_h3{background-repeat: no-repeat; background-position:right top;}/* 單圖上右 */

.uxjy_ltth_jofi_k1{background-repeat: no-repeat; background-position:left;}/* 單圖中左 */

.uxjy_ltth_jofi_k2{background-repeat: no-repeat; background-position:center;}/* 單圖中中 */

.uxjy_ltth_jofi_k3{background-repeat: no-repeat; background-position:right;}/* 單圖中右 */

.uxjy_ltth_jofi_g1{background-repeat: no-repeat; background-position:left bottom;}/* 單圖下左 */

.uxjy_ltth_jofi_g2{background-repeat: no-repeat; background-position:center bottom;}/* 單圖下中 */

.uxjy_ltth_jofi_g3{background-repeat: no-repeat; background-position:right bottom;}/* 單圖下右 */

/*----====----*/

css背景圖片代碼

1、首先在電腦端找到Dw軟件，進(jìn)行打開操作，然后新建一個(gè)html文件。

2、新建文件完成之后，寫入一個(gè)div代碼操作，如圖所示。

3、寫入div代碼之后，引入一個(gè)css樣式，如圖代碼操作所示。

4、引入樣式代碼之后，打開引入的css.文件，如圖所示。

5、在新引入的css文件中，寫入css背景圖片代碼即可，如圖所示。

CSS樣式表控制背景圖片大小

可以通過background-size屬性來設(shè)定背景圖片的大小。它可以是像素（px）或者是百分比(%)，舉例說明：background-size:950px* 200px這表示把背景圖片大小調(diào)整為寬度950像素，高度200像素。

1、background-size的語法說明：

(1)屬性名:background-size

(2)屬性值:其中 bg-size = [|| auto ]{1,2} | cover |

contain

(3)初始值:auto auto

(4)應(yīng)用于:所有元素

(5)繼承性:無

(6)百分比:后面會說明

(7)計(jì)算值:根據(jù)指定

2、代碼說明：

/* 一個(gè)值: 這個(gè)值指定圖片寬度，第二個(gè)值為auto */

background-size: auto

background-size: 50%

background-size: 3em

background-size: 12px

/* 兩個(gè)值: 第一個(gè)值指定圖片的寬度，第二個(gè)值指定圖片的高度 */

background-size: 50% auto

background-size: 3em 25%

background-size: auto 6px

background-size: auto auto

/*多重背景，用逗號隔開，在CSS語法中凡語法后跟*或者#，都是可以無限重復(fù)的，但必須用逗號隔開。 */

background-size: auto, auto ????/* 請區(qū)別于background-size: auto auto*/

background-size: 50%, 25%, 25%

background-size: 6px, auto, contain

background-size: inherit

擴(kuò)展資料：

背景重復(fù)：

如果需要在頁面上對背景圖像進(jìn)行平鋪，可以使用?background-repeat 屬性。

屬性值 repeat 導(dǎo)致圖像在水平垂直方向上都平鋪，就像以往背景圖像的通常做法一樣。repeat-x 和 repeat-y 分別導(dǎo)致圖像只在水平或垂直方向上重復(fù)，no-repeat 則不允許圖像在任何方向上平鋪。

背景圖像將從一個(gè)元素的左上角開始。如下：

body

{

background-image: url(/i/eg_bg_03.gif); ?background-repeat: repeat-y;

}

背景定位：

可以利用?background-position 屬性改變圖像在背景中的位置。

下面的例子在 body 元素中將一個(gè)背景圖像居中放置：

body

{

background-image:url('/i/eg_bg_03.gif');

background-repeat:no-repeat; ? ?background-position:center;

}

為 background-position 屬性提供值有很多方法。首先，可以使用一些關(guān)鍵字：top、bottom、left、right 和 center。通常，這些關(guān)鍵字會成對出現(xiàn)，不過也不總是這樣。還可以使用長度值，如 100px 或 5cm，最后也可以使用百分?jǐn)?shù)值。不同類型的值對于背景圖像的放置稍有差異。

參考資料來源：w3school：CSS 背景

CSS如何添加背景圖片

通過css：background-image語句設(shè)置背景。

background-image 屬性會在元素的背景中設(shè)置一個(gè)圖像。根據(jù)?background-repeat?屬性的值，圖像可以無限平鋪、沿著某個(gè)軸（x 軸或 y 軸）平鋪，或者根本不平鋪。初始背景圖像（原圖像）根據(jù)?background-position?屬性的值放置。

（1）相對的文件位置：

（2）測試代碼：

測試效果：

擴(kuò)展資料：

background-image 屬性為元素元素的背景占據(jù)了元素的全部尺寸，包括內(nèi)邊距和邊框，但不包括外邊距。

默認(rèn)地，背景圖像位于元素的左上角，并在水平和垂直方向上重復(fù)。

提示：請?jiān)O(shè)置一種可用的背景顏色，這樣的話，假如背景圖像不可用，頁面也可獲得良好的視覺效果。

參考資料：百度百科--CSS background-image

CSS3樣式中如何讓背景漸變與背景圖片共存？

目前，對CSS3支持日趨完善，實(shí)現(xiàn)兼容性的漸變背景效果是完全可以的，讓背景漸變與背景圖片共存的方法很簡單，主要要注意的是圖片要 保持“最小單元”的準(zhǔn)則，選擇正確的瀏覽器，該問題就能得到解決，下面介紹一下具體的解決方法。

1、圖片漸變切圖時(shí)一定要以最小為準(zhǔn)則，例如在做垂直方向的純顏色的漸變時(shí)，嘗試使用1個(gè)像素的豎直圖片作為漸變背景“最小單元”。另外，要注意css3雖然支持很多的瀏覽器的兼容，但是目前不支持Opera瀏覽器。

2、如果兼容程度允許的話，純色漸變背景可以使用css3的漸變樣式，如{background: linear-gradient(left top, red , blue);}，如此一來能夠減少切圖量，還可以加快網(wǎng)頁加載速度，缺點(diǎn)是使用主流瀏覽器的話，就必須要添加前綴。

3、注意對于webkit核心的瀏覽器，如Chrome/Safari瀏覽器，在這些瀏覽器下要做到漸變背景，也需要使用CSS3 漸變方法，css-gradient，具體就是-webkit-gradient，使用語Firefox瀏覽器業(yè)是有一點(diǎn)差異的。