您現在的位置: 365建站網 > 365教程 > CSS3教程 > CSS3 背景

CSS3 背景

此節有 180 人學習過     參與評論

CSS3 背景

CSS3 包含多個新的背景屬性,它們提供了對背景更強大的控制。

在本章,您將學到以下背景屬性:

  • background-size
  • background-origin

您也將學到如何使用多重背景圖片。

瀏覽器支持

屬性 瀏覽器支持
background-size
background-origin

Internet Explorer 9+、Firefox、Chrome、Safari 以及 Opera 支持新的背景屬性。

CSS3 background-size 屬性

background-size 屬性規定背景圖片的尺寸。

在 CSS3 之前,背景圖片的尺寸是由圖片的實際尺寸決定的。在 CSS3 中,可以規定背景圖片的尺寸,這就允許我們在不同的環境中重復使用背景圖片。

您能夠以像素或百分比規定尺寸。如果以百分比規定尺寸,那么尺寸相對于父元素的寬度和高度。

例子 1

調整背景圖片的大?。?/p>

div
{
background:url(bg_flower.gif);
-moz-background-size:63px 100px; /* 老版本的 Firefox */
background-size:63px 100px;
background-repeat:no-repeat;
}

親自試一試

例子 2

對背景圖片進行拉伸,使其完成填充內容區域:

div
{
background:url(bg_flower.gif);
-moz-background-size:40% 100%; /* 老版本的 Firefox */
background-size:40% 100%;
background-repeat:no-repeat;
}

親自試一試

CSS3 background-origin 屬性

background-origin 屬性規定背景圖片的定位區域。

背景圖片可以放置于 content-box、padding-box 或 border-box 區域。

背景圖片的定位區域

實例

在 content-box 中定位背景圖片:

div
{
background:url(bg_flower.gif);
background-repeat:no-repeat;
background-size:100% 100%;
-webkit-background-origin:content-box; /* Safari */
background-origin:content-box;
}

親自試一試

CSS3 多重背景圖片

CSS3 允許您為元素使用多個背景圖像。

實例

為 body 元素設置兩幅背景圖片:

body
{ 
background-image:url(bg_flower.gif),url(bg_flower_2.gif);
}

親自試一試

新的背景屬性

屬性 描述 CSS
background-clip 規定背景的繪制區域。 3
background-origin 規定背景圖片的定位區域。 3
background-size 規定背景圖片的尺寸。 3

如對本文有疑問,請提交到交流論壇,廣大熱心網友會為你解答??! 點擊進入論壇


發表評論 (180人查看,0條評論)
請自覺遵守互聯網相關的政策法規,嚴禁發布色情、暴力、反動的言論。
用戶名: 驗證碼: 點擊我更換圖片
最新評論
------分隔線----------------------------
自拍偷拍福力视频,偷拍国际精品,麻豆一区福利电影,国产网红视频午夜福利,se视频大全,久久国产AV影院 yellow2019最新资源| 床戏有娇喘声视频大全| 国产精品久久久久精品| 被黑人做的白浆直流| 成人社区激情长短视频| 试看区体验区夜夜看片| 小说区图片区视频区偷拍区| janpanese熟女丰满| av人妻社区男人的天堂| 日本少妇| 丁香婷婷| 欧美最新| 亚洲日韩亚洲另类激情文学| 极品人妻的娇喘呻吟| a片在线视频免费观看网址| 孕妇怀孕高潮潮喷视频| 暖暖日本高清中文| 男人天堂2018在线| 嫁给老外每个晚上都| 欧美videoseoxwc10| 国产精品毛片更新无码| 暖暖直播高清在线中文| 国产美女爽到尿喷出来视频| 男女裸体下面进入的免费视频| 台湾三级片| 宝贝堵着不许流出来二哥| 老师再来一次| 免费人成网站在线观看99| 娇小的学生videos流血了| 2020最新国产在线不卡a| 西西大尺度美軳人人体bt| http://www.ptjnhg.com