css3背景_動力節(jié)點Java學院整理
發(fā)布時間：2017-07-11 10:30:40 作者：net_lover 
我要評論
我要評論這篇文章主要介紹了css3背景,CSS3規(guī)范中對背景這一部分，新加入了一些令人興奮的功能，如可以設置多個背景圖片、可以指定背景大小、設置背景漸變等功能。
CSS3規(guī)范中對背景這一部分，新加入了一些令人興奮的功能，如可以設置多個背景圖片、可以指定背景大小、設置背景漸變等功能。CSS3規(guī)范中定義的背景屬性有：
|
屬性名
|
可能的值
|
默認值
|
|
background
|
是一種簡寫方式：bg-image || bg-position || / bg-size || repeat-style || attachment || bg-origin，最后一個背景層可以設置background-color
|
|
|
background-attachment
|
scroll | fixed | local
|
scroll
|
|
background-clip
|
border-box | padding-box 表示背景渲染的方法：padding box表示背景在padding box內(nèi)渲染；border-box表示背景在border-box內(nèi)渲染
|
border-box
|
|
background-color
|
<color>
|
transparent
|
|
background-image
|
image | none 可以設置多個背景圖，以逗號（,）分隔開。none也代表一個背景層
|
none
|
|
background-origin
|
border-box | padding-box | content-box 背景相對的位置，相對于上面3個值中的一個。
|
padding-box
|
|
background-position
|
% length top right bottom left center 這些屬性的設置方法跟以前類似
|
0% 0%
|
|
background-repeat
|
repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2} 平鋪方式
|
repeat
|
|
background-size
|
[length | % | auto ]{1,2} | cover | contain 設置背景的大小。contain表示按比例縮放占據(jù)最大高度或者寬度的背景；cover表示鋪滿整個背景。
|
auto
|
下面我們以5個例子來說明一些新的CSS3的功能。其中，CSS3允許設置多個背景圖片，每個背景圖片占一層，層的上下按照在CSS中寫的順序來定，最先寫的背景在最上層。
background:url(http://dotnet.aspx.cc/Book/Images/CSS1_s.jpg) 0 0 no-repeat,
url(http://dotnet.aspx.cc/Book/Images/CSS2_s.jpg) 200px 0 no-repeat,
url("http://dotnet.aspx.cc/Book/Images/ASPNET20Book1_s.jpg") 400px 201px no-repeat;
是背景的簡寫方式，除了默認值之外，等效于下面的寫法：
background-image:url("http://dotnet.aspx.cc/Book/Images/CSS1_s.jpg"),url("http://dotnet.aspx.cc/Book/Images/CSS2_s.jpg"),url("http://dotnet.aspx.cc/Book/Images/ASPNET20Book1_s.jpg");
background-repeat: no-repeat, no-repeat, no-repeat;
background-position: 0 0, 200px 0, 400px 201px;
另外一個需要注意的是：背景漸漸也是一個背景層，所以在例子4中
background-image:-moz-linear-gradient(left, rgba(0, 255, 0, 1), rgba(255, 0, 0, 0)),
url(http://dotnet.aspx.cc/Book/Images/CSS2_s.jpg);
的寫法順序不能顛倒，如果寫成
background-image:url("http://dotnet.aspx.cc/Book/Images/CSS2_s.jpg"),
-moz-linear-gradient(left, rgba(0, 255, 0, 1), rgba(255, 0, 0, 0));
就看不出漸變效果了。
例子的全部源代碼如下：
< style type ="text/css" >
div{font-size:24px;font-weight:bo;d;color:#f00;text-align:right;margin:10px 0;}
#div1
{
height:400px;width:600px;
border:4px solid orange;
background-image:url("http://dotnet.aspx.cc/Book/Images/CSS1_s.jpg"),url("http://dotnet.aspx.cc/Book/Images/CSS2_s.jpg"),url("http://dotnet.aspx.cc/Book/Images/ASPNET20Book1_s.jpg");
background-repeat: no-repeat, no-repeat, no-repeat;
background-position: 0 0, 200px 0, 400px 201px;
}
#div2
{
height:400px;width:600px;
border:4px solid orange;
background:url(http://dotnet.aspx.cc/Book/Images/CSS1_s.jpg) 0 0 no-repeat,
url(http://dotnet.aspx.cc/Book/Images/CSS2_s.jpg) 200px 0 no-repeat,
url("http://dotnet.aspx.cc/Book/Images/ASPNET20Book1_s.jpg") 400px 201px no-repeat;
}
#div3
{
height:100px;width:600px;
border:4px solid orange;
background-image: -moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet);
}
#div4
{
height:100px;width:600px;
border:4px solid orange;
background-image:-moz-linear-gradient(left, rgba(0, 255, 0, 1), rgba(255, 0, 0, 0)),
url("http://dotnet.aspx.cc/Book/Images/CSS2_s.jpg");
}
#div5
{
height:400px;width:600px;
border:4px solid orange;
background-image:url("http://dotnet.aspx.cc/Book/Images/CSS2_s.jpg");
-moz-background-size:cover;
background-repeat:no-repeat;
}
</ style >
< div id ="div1" > div1 </ div >
< div id ="div2" > div2 </ div >
< div id ="div3" > div3 </ div >
< div id ="div4" > div4 </ div >
< div id ="div5" > div5 </ div >
相關文章
- 前幾天在工作的時候遇到一個問題，項目需要實現(xiàn)一個效果，當鼠標移入一個元素的時候，元素出現(xiàn)一個動態(tài)的邊框，通過網(wǎng)上查找資料看到有人推薦可以使用Css3來實現(xiàn)，后來試了2016-11-08
- 這篇文章給大家介紹的是，利用CSS3實現(xiàn)當點擊按鈕的時候，按鈕的背景是漸變動畫的效果，實現(xiàn)后的效果非常好，開發(fā)的時候利用這種效果的按鈕會給用戶一種非?？犰诺母惺?，感2016-10-19
- 這篇文章主要介紹了CSS3條紋背景制作的實戰(zhàn)攻略,根據(jù)Forefox瀏覽器和webkit內(nèi)核的瀏覽器兩種情況來分別講解,需要的朋友可以參考下2016-05-31
- 這篇文章主要介紹了使用CSS3實現(xiàn)多列布局與多背景的技巧,包括多列欄目的高度平衡和多間隙等一些細節(jié)方面的調(diào)整方法講解,需要的朋友可以參考下2016-02-29
- 這篇文章主要介紹了用CSS3實現(xiàn)背景漸變的方法,作者并沒有給出效果demo這個比較殘念...需要的朋友可以參考下2015-07-14
- background-size是css3提供的一個新特性，它可以讓你隨心所欲的控制背景圖片的大小。下面我們來一步步看看這個新特性都有什么值得我們驚艷的地方2014-09-02
使用CSS3的背景漸變Text Gradient 創(chuàng)建文字顏色漸變
使用CSS3 的背景漸變 -webkit-gradient ，用一個背景漸變的 DIV 代替圖片。下面是實現(xiàn)效果示例，相比以上方案優(yōu)點是不使用圖片，減小請求量和流量2014-08-19- CSS背景動畫很長時間以來都是一個熱門話題，很多時候都是因為效果特別絢麗，而且不需要額外的技術。最近有人問我是否可以給頁面上一個指定的元素安排多重背景動畫，答案是y2014-04-04
- CSS3之多背景background和CSS2的使用方法一樣，只不過圖片可以從1個圖片變成多個圖片了，其在CSS3的項目中運用比較廣泛，大家有更好的案例要積極分享喲2013-10-18
- CSS3背景尺寸Background-size，這個屬性是改變背景尺寸的通過各種不同是屬性值改變背景尺寸呈現(xiàn)的大小，下面為大家詳細介紹下其語法、瀏覽器兼容及使用示例，感興趣的朋友2013-10-14