css3 background-image屬性實例詳解

這篇文章主要介紹了css3實現一個p設定多張背景圖片及background-image屬性,同時對於css3背景漸變也做了詳細的解釋,水平漸變,左上角漸變等等方式,需要的朋友可以參考下

引子

以前做網頁版面的時候，一個p只能設定一張背景圖片，設定多個背景的話，要用多個p嵌套才能實現，這樣相容性比較好。若您的網站要求相容瀏覽器低版本，建議使用此方法。 css3的出現，解決了一個p只能設定一個背景的問題，使一個p可以設定多個背景圖片。 background-image還可以設定線性漸變，等效果。

題外話

關於css3的background，功能很強大，有很多屬性，像是background-size等等，這些屬性都可以寫一篇部落格來講述。關於css3background的其他屬性，後面會出部落格來單獨講述！

CSS3/CSS1 background-image 屬性

語法:

background-image：<bg-image> [ , <bg-image> ]*
<bg-image> = none | <url> | <linear-gradient> | <radial-gradient> | <repeating-linear-gradient> | <repeating-radial-gradient>
默认值：none

取值：

#

none：无背景图。
< url >：使用绝对或相对地址指定背景图像。
< linear-gradient>：使用线性渐变创建背景图像。（CSS3）
< radial-gradient>：使用径向(放射性)渐变创建背景图像。（CSS3）
< repeating-linear-gradient>：使用重复的线性渐变创建背景图像。（CSS3）
< repeating-radial-gradient>：使用重复的径向(放射性)渐变创建背景图像。（CSS3）

說明：

設定或檢索物件的背景影像。
如果設定了background-image，同時也建議作者設定background-color用於當背景圖像不可見時保持與文字一定的對比。
對應的腳本特性為backgroundImage。

相容性：

#IE8及更早瀏覽器不支援CSS3 background-image，即不支援多背景和使用漸層作為背景圖像。
IE9不支援CSS3新增參數值：< linear-gradient > | < radial-gradient > |< repeating-linear-gradient > | < repeating-radial-gradient >作為背景圖片。
Opera11.50-11.51不支援CSS3新增參數值：< radial-gradient > |< repeating-radial-gradient >作為背景圖片。

寫入法：

css3設定多張背景圖片

css3設定多張背景圖片，可如下寫：

background:url("haoroomsCSS1_s.jpg") 0 0 no-repeat,
#background:url("haoroomsCSS1_s.jpg") 0 0 no-repeat,
            
                        會"),url("3.jpg");

background-repeat: no-repeat, no-repeat, no-repeat; 

background-position: 0 0, 200px 0, 400px 201px; 

css3背景漸變

#標準寫法

#

background-image: linear-gradient(  [ <angle> | <side-or-corner> ,]? <color-stop> [, <color-stop>]+ );

上面這種CSS語法我們常見到，可能有人看不懂具體的意思，其實上面的些符號意義與正規表示式有很多一致之處：

[]在正規中表示一個字元類，這裡，你可以理解為一個小單元。

|表示候選。也就是「或」的意思，要嘛前面的，要嘛就後面的。

?為量詞，表示0個或1個，言下之意就是，你可以不指定方向，直接漸變色走起。例如：

background:linear-gradient(red, yellow);

就是從上往下的紅黃條紋效果。

+也是量詞，表示1個或更多個。因此，終止顏色是必不可少的。例如：linear-gradient(red)是醬油命，白板。

<>中的是關鍵字，主要是讓開發人員知道這裡應該放些什麼內容。

水平漸層

{background-image:linear-gradient(left, red 100px, yellow 200px);}

效果如下圖：

左上角漸層

那從(100px, 100px)到(200px, 200px)應該就是從左上角開始，寫法如下：

{background-image:linear-gradient(left top, red 100px, yellow 200px);}

#效果如下

########################################### #########漸層方向寫法組合：##########

left, right, top, bottom, left top, left bottom, right top, right， bottom
分别表示，从左往右，从右往左，从上往下，从下往上，从左上往右下，从……（都懂的，不全写了）
当然，也可以用angle角度来写！

{background-image:linear-gradient(-45deg, red 100px, yellow 200px);}

具体的样式大家可以尝试着写一下，看一下！很多情况下，用了才知道！

注意：有不少效果加了-webkit前缀以及-moz前缀会展现的不一样！

例如：

background-image:-webkit-linear-gradient(-45deg, red, yellow)
与

background-image:linear-gradient(-45deg, red, yellow)<br/>在Chrome浏览器下的渐变方向居然是相反的！但是45deg是正常的。Firefox浏览器下也是如此，有前缀和没有前缀方向相反！咋回事？

原因很简单，CSS3目前还是草案阶段！

从浏览器去掉前缀前后的变化可以推测，之前，W3C的渐变坐标是与photoshop中一致的，但是，后来，由于某些原因，修改了。

至于什么原因，根据我草草的查找，可能与下面几个关键字之一有联系：animation/transition动画、write-mode书写方向、flex box模型、以及radial-gradient渐变等。在这里就不深入研究了！

前缀兼容

基本的写法如下：

 background-image: linear-gradient(top, #fff, #dededc);

但是为了兼容，有时候要写多个前缀，变成如下：

background-image: -ms-linear-gradient(top, #fff, #dededc);
    background-image: -moz-linear-gradient(top, #fff, #dededc);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dededc));
    background-image: -webkit-linear-gradient(top, #fff, #dededc);
    background-image: -o-linear-gradient(top, #fff, #dededc);
    background-image: linear-gradient(top, #fff, #dededc);

关于”css3实现一个p设置多张背景图片及background-image属性“今天就写到这里，有问题可以相互交流，加油！

以上是css3 background-image屬性實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！