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

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

集賢網(wǎng)站建設公司創(chuàng)新互聯(lián)建站,集賢網(wǎng)站設計制作，有大型網(wǎng)站制作公司豐富經(jīng)驗。已為集賢1000多家提供企業(yè)網(wǎng)站建設服務。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站制作要多少錢，請找那個售后服務好的集賢做網(wǎng)站的公司定做！

1、background-size的語法說明：

(1)屬性名:background-size

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

contain

(3)初始值:auto auto

(4)應用于:所有元素

(5)繼承性:無

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

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

2、代碼說明：

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

background-size: auto

background-size: 50%

background-size: 3em

background-size: 12px

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

background-size: 50% auto

background-size: 3em 25%

background-size: auto 6px

background-size: auto auto

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

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

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

background-size: 6px, auto, contain

background-size: inherit

擴展資料：

背景重復：

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

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

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

body

{

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

}

背景定位：

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

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

body

{

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

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

}

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

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

《CSS3DIV網(wǎng)頁樣式與布局從入門到精通》pdf下載在線閱讀全文，求百度網(wǎng)盤云資源

《CSS3DIV網(wǎng)頁樣式與布局從入門到精通》百度網(wǎng)盤pdf最新全集下載:

鏈接:

?pwd=7vgd 提取碼: 7vgd

簡介：全書分三大部分，共16章。第一部分主要介紹了CSS相關基礎知識，包括CSS樣式設計基礎，使用CSS設置字體和文本樣式、圖片樣式，控制背景圖像，設計列表樣式、表格樣式、表單樣式，定義鏈接樣式，使用DIV+CSS布局網(wǎng)頁，CSS定位與網(wǎng)頁版式設計等；第二部分介紹了CSS新技術，包括使用CSS3布局網(wǎng)頁和設計動畫；第三部分為擴展應用部分，介紹了如何使用JavaScript控制 CSS樣式、使用CSS設計XML文檔樣式、使用CSS設計移動頁面等。

如何將一塊div為黑色背景 漸變成上黑下部透明的？

不同瀏覽器使用的內(nèi)核不同，導致對漸變的代碼寫法也不同。

一、Webkit

又稱Safari內(nèi)核,Chrome內(nèi)核原型,。它是蘋果公司自己的內(nèi)核，也是蘋果的Safari瀏覽器使用的內(nèi)核。360急速瀏覽器，QQ瀏覽器、搜狗瀏覽器用的是Webkit內(nèi)核。

盡管Mozilla和Webkit通常對css3屬性采取同樣的語法，但是對于漸變，他們很不幸的不能達成一致。Webkit是第一個支持漸變的瀏覽器內(nèi)核，它使用下面的結(jié)構：

/* 語法，參考自: */

-webkit-gradient(type, point [, radius]?, point [, radius]? [, stop]*)

/* 實際用法... */

background: -webkit-gradient(linear, 0 0, 0 100%, from(red), to(blue));

不要擔心這些語法會讓你看花眼，我也是這樣的！只要記得我們需要用一個逗號來隔開這個參數(shù)組。

漸變的類型? (linear)

漸變開始的X Y 軸坐標(0 0 – 或者left-top)

漸變結(jié)束的X Y 軸坐標(0 100% 或者left-bottom)

開始的顏色? (from(red))

結(jié)束的顏色? (to(blue))

Mozilla瀏覽器

Mozilla Firefox（正式縮寫為 Fx，非正式縮寫為FF），中文名為火狐，是由Mozilla基金會（ 謀智網(wǎng)絡）與開源團體共同開發(fā)的網(wǎng)頁瀏覽器。

Firefox，從3.6版本才開始支持漸變，更喜歡和Webkit略微不同的語法。

/* 語法，參考自: */ -moz-linear-gradient( [

point || angle,]? stop, stop [, stop]* )

/* 實際用法*/

background: -moz-linear-gradient(top, red, blue);

請注意我們將漸變的類型——linear——放到了屬性前綴中了

漸變從哪里開始? (top – 我們也可以使用度數(shù)，比如-45deg)

開始的顏色? (red)

結(jié)束的顏色? (blue)

Color-Stops

如果你不需要從一個顏色到另一個顏色的100%漸變怎么辦？這就是color stop起作用的時候了。一個普遍的設計技術是使用一個較短而細微的漸變，比如：

注意頂部的淺灰色到白色的細小的漸變

在過去，標準的做法就是制作一個圖片，并將其設為一個元素的背景圖片，然后讓其水平平鋪。然而使用CSS3，這是個小Case。

1、 background: white; /* 為較舊的或者不支持的瀏覽器設置備用屬性 */

2、background: -moz-linear-gradient(top, #dedede, white 8%);

3、background: -webkit-gradient(linear, 0 0, 0 8%, from(#dedede), to(white));

4、border-top: 1px solid white;

這次，我們讓漸變結(jié)束于8%，而不是默認的100%。請注意我們也在頭部采用了一個邊框，以形成對比。這很常用。

如果我們想要添加多一種(幾種)顏色，我們可以這樣做：

1、 ? background: white; /* 備用屬性 */

2、background: -moz-linear-gradient(top, #dedede, white 8%, red 20%);

3、background: -webkit-gradient(linear, 0 0, 0 100%, from(#dedede), color-stop(8%, white), color-stop(20%, red);

對于-moz 版本，我們定義，從元素的20%的高度的地方開始是紅色。

而對于-webkit，我們使用color-stop，采用兩個參數(shù)：哪里開始停止，使用哪種顏色。

三、IE

IE并不支持CSS漸變，但是提供了漸變?yōu)V鏡，可以實現(xiàn)最簡單的漸變效果：

1、 ? filter: ?progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ff0000'); /* IE6,IE7 */

2、-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ff0000')"; /* IE8 */

PS：事實上，我們在《RGBa色彩的瀏覽器支持》提到的IE的解決方法，就是使用這個漸變?yōu)V鏡。

關于CSS漸變的一些要點：

盡可能的使用它。如果讓IE用戶看到一個固定的純色，我鼓勵你使用這種方法；

IE6/7/8, Opera, Safari 3, 和Firefox 3 不能渲染CSS3?漸變，F(xiàn)irefox 和Safari用戶通常經(jīng)常升級瀏覽器，而Chrome的自動升級機制會在后臺自動升級，所以這并不是個大問題；

總是為不支持這些瀏覽器私有屬性的瀏覽器應用一個默認的，純色背景；

永遠不要使用紅色到藍色的漸變，就像我用作例子的這種；

頁面無須在每個瀏覽器里面看起來完全一樣！

Firefox可以使用角度來設定漸變的方向，而webkit只能使用x和y軸的坐標。

漸變可以創(chuàng)建類似于彩虹的效果，低版本的瀏覽器不的不使開發(fā)者用圖片來實現(xiàn)，CSS3將會輕松實現(xiàn)網(wǎng)頁漸變效果。

要得上面的線性漸變效果，我們這樣去定義CSS3樣式：

background-image: -moz-linear-gradient(top, #8fa1ff, #3757fa); /* Firefox */

background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ff4f02), color-stop(1, #8f2c00)); /* Saf4+, Chrome */

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c6ff00', endColorstr='#538300', GradientType='0'); /* IE*/

-moz-linear-gradient有三個參數(shù)。第一個參數(shù)表示線性漸變的

看下面這種簡單的理解

一. Webkit瀏覽器

(1) 第一種寫法：

background:-webkit-gradient(linear ,10% 10%，100% 100%，

color-stop(0.14,rgb(255,0,0)),

color-stop(0.5,rgb(255,255,0)),

color-stop(1,rgb(0,0,255))?);

第一個參數(shù)：表示的是漸變的類型

linear線性漸變

第二個參數(shù)：分別對應x，y方向漸變的起始位置

第三個參數(shù)：分別對應x，y方向漸變的終止位置

第四/五/N個參數(shù)：設置漸變的位置及顏色

(2)第二種寫法：這種寫法比較簡單，而且效果比較自然

background:-webkit-gradient(linear, 0 0, 0 100%, from(＃2074af), to(＃2c91d2));

第一個參數(shù)：表示的是漸變的類型

linear線性漸變

第二個參數(shù)：分別對應x，y方向漸變的起始位置

第三個參數(shù)：分別對應x，y方向漸變的終止位置

第四個參數(shù)：設置了起始位置的顏色

第五個參數(shù)：設置了終止位置的顏色

二.Mozilla瀏覽器

(1)第一種寫法：

background:-moz-linear-gradient(10 10 90deg,

rgb(25,0,0) 14%,

rgb(255,255,0) 50%,

rgb(0,0,255) 100%);

第一個參數(shù)：設置漸變起始位置及角度

第二/三/四/N個參數(shù)：設置漸變的顏色和位置

(2)第二種寫法：這種寫法比較簡單，而且效果比較自然

background:-moz-linear-gradient(top, ＃FFC3C8,＃FF9298);

第一個參數(shù)：設置漸變的起始位置

第二個參數(shù)：設置起始位置的顏色

第三個參數(shù)：設置終止位置的顏色

三.IE 瀏覽器

IE瀏覽器實現(xiàn)漸變只能使用IE自己的濾鏡去實現(xiàn)

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=＃00ffff,endColorstr=＃9fffff,grandientType=1);

第一個參數(shù)：漸變起始位置的顏色

第二個參數(shù)：漸變終止位置的顏色

第三個參數(shù)：漸變的類型

0?代表豎向漸變??????? 1? 代表橫向漸變

P.S.這里設置背景的時候不需要給background設置，直接用filter即可，不要和其他的瀏覽器混淆

參考：

本文題目：css3樣式設計圖片,圖片的css樣式
本文URL：http://sd-ha.com/article34/dsesjse.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設計、品牌網(wǎng)站設計、云服務器、標簽優(yōu)化、靜態(tài)網(wǎng)站、建站公司

廣告

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