首頁 > web前端 > css教學 > CSS3教學-背景

CSS3教學-背景

黄舟
發布: 2016-12-27 15:56:52
原創
1331 人瀏覽過

前端開發的程式設計師們,每天跟大家講解一些關於CSS3教程的知識是多麼開心的一件事啊,CSS3 包含多個新的背景屬性,它們提供了對背景更強大的控制。

在本文,您將學到以下兩種背景屬性:

1、background-size;

2、background-origin。

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

瀏覽器支援

CSS3教學-背景

我們首先來了解CSS3 background-size 屬性:

CSS3教學-背景

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

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

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

範例1:

調整背景圖片的大小:

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;
}
登入後複製

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

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

CSS3教學-背景實例:

在 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教學-背景CSS3 允許您為元素使用多個背景圖片。

實例:

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

body
{
background-image:url(bg_flower.gif),url(bg_flower_2.gif);
}
登入後複製

新的背景屬性:


CSS3教學-背景oPHC252535C22 月的內容,533356299999950293020299999950202999999999999999999995933(F www.php.cn)!


相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板