Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537
例
只有垂直方向重復(fù)background-image:
body
{
background-image:url('paper.gif');
background-repeat:repeat-y;
}
標簽定義及使用說明
設(shè)置如何平鋪對象的 background-image 屬性。
默認情況下,重復(fù)background-image的垂直和水平方向。
默認值: | repeat |
---|---|
繼承: | no |
版本: | CSS1 |
JavaScript 語法: | objectobject.style.backgroundRepeat="repeat-y" |
瀏覽器支持
表格中的數(shù)字表示支持該屬性的第一個瀏覽器版本號。
緊跟在 -webkit-, -ms- 或 -moz- 前的數(shù)字為支持該前綴屬性的第一個瀏覽器版本號。
<
Property | |||||
---|---|---|---|---|---|
background-repeat | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
IE8以及更早版本的瀏覽器不支持多個背景圖像在一個元素。
注意 IE7和更早的版本不支持"inherit(繼承)"的值。 IE8需要定義!DOCTYPE。 IE9支持"inherit(繼承)"。
提示和注釋
提示: background-position屬性設(shè)置背景圖像位置。如果指定的位置是沒有任何背景,圖像總是放在元素的左上角。
屬性值
值 | 說明 |
---|---|
repeat | 背景圖像將向垂直和水平方向重復(fù)。這是默認 |
repeat-x | 只有水平位置會重復(fù)背景圖像 |
repeat-y | 只有垂直位置會重復(fù)背景圖像 |
no-repeat | background-image不會重復(fù) |
inherit | 指定background-repea屬性設(shè)置應(yīng)該從父元素繼承 |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!
SS 背景屬性用于定義HTML元素的背景。
CSS 屬性定義背景效果:
background-color
background-image
background-repeat
background-attachment
background-position
背景顏色
background-color 屬性定義了元素的背景顏色.
頁面的背景顏色使用在body的選擇器中:
實例
body {background-color:#b0c4de;}
CSS中,顏色值通常以以下方式定義:
十六進制 - 如:"#ff0000"
RGB - 如:"rgb(255,0,0)"
顏色名稱 - 如:"red"
以下實例中, h1, p, 和 div 元素擁有不同的背景顏色:
實例
h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}
背景圖像
background-image 屬性描述了元素的背景圖像.
默認情況下,背景圖像進行平鋪重復(fù)顯示,以覆蓋整個元素實體.
頁面背景圖片設(shè)置實例:
實例
body {background-image:url('paper.gif');}
嘗試一下 ?
下面是一個例子是一個糟糕的文字和背景圖像組合。文本可讀性差:
實例
body {background-image:url('bgdesert.jpg');}
背景圖像 - 水平或垂直平鋪
默認情況下 background-image 屬性會在頁面的水平或者垂直方向平鋪。
一些圖像如果在水平方向與垂直方向平鋪,這樣看起來很不協(xié)調(diào),如下所示:
實例
body
{
background-image:url('gradient2.png');
}
如果圖像只在水平方向平鋪 (repeat-x), 頁面背景會更好些:
實例
body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}
背景圖像- 設(shè)置定位與不平鋪
讓背景圖像不影響文本的排版
如果你不想讓圖像平鋪,你可以使用 background-repeat 屬性:
實例
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}
以上實例中,背景圖像與文本顯示在同一個位置,為了讓頁面排版更加合理,不影響文本的閱讀,我們可以改變圖像的位置。
可以利用 background-position 屬性改變圖像在背景中的位置:
實例
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}
背景- 簡寫屬性
在以上實例中我們可以看到頁面的背景顏色通過了很多的屬性來控制。
為了簡化這些屬性的代碼,我們可以將這些屬性合并在同一個屬性中.
背景顏色的簡寫屬性為 "background":
實例
body {background:#ffffff url('img_tree.png') no-repeat right top;}
嘗試一下 ?
當使用簡寫屬性時,屬性值的順序為::
background-color
background-image
background-repeat
background-attachment
background-position
以上屬性無需全部使用,你可以按照頁面的實際需要使用.
這個實例使用了先前介紹的CSS,你可以查看相應(yīng)實例: CSS 實例
更多實例
如何設(shè)置固定的背景圖像
本例演示如何設(shè)置固定的背景圖像。圖像不會隨著頁面的其他部分滾動。
CSS 背景屬性
Property | 描述 |
---|---|
background | 簡寫屬性,作用是將背景屬性設(shè)置在一個聲明中。 |
background-attachment | 背景圖像是否固定或者隨著頁面的其余部分滾動。 |
background-color | 設(shè)置元素的背景顏色。 |
background-image | 把圖像設(shè)置為背景。 |
background-position | 設(shè)置背景圖像的起始位置。 |
background-repeat | 設(shè)置背景圖像是否及如何重復(fù)。 |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!
例
設(shè)置重復(fù)圖像的方式:
div {
border-image-source: url(border.png);
border-image-repeat: repeat;
}
定義和使用
border-image-repeat 屬性用于圖像邊界是否應(yīng)重復(fù)(repeated)、拉伸(stretched)或鋪滿(rounded)。
提示:你可以查看 border-image 屬性 (簡寫屬性用于設(shè)置所有 border-image-* 屬性)。
默認值: | stretch |
---|---|
繼承性: | no |
動畫: | no. 查看 animatable |
版本: | CSS3 |
JavaScript 語法: | object.style.borderImageRepeat="round"嘗試一下 |
瀏覽器支持
表格中的數(shù)字表示支持該事件的第一個瀏覽器的版本號。
屬性 | |||||
---|---|---|---|---|---|
border-image-repeat | 15.0 | 11.0 | 15.0 | 6.0 | 15.0 |
CSS 語法
border-image-repeat: stretch|repeat|round|initial|inherit;
注意: 該屬性規(guī)定如何延展和鋪排邊框圖像的邊緣和中間部分。因此,您可以規(guī)定兩個值。如果省略第二個值,則采取與第一個值相同的值。
屬性值
值 | 描述 | 實例 |
---|---|---|
stretch | 默認值。拉伸圖像來填充區(qū)域 | 查看實例 ? |
repeat | 平鋪(repeated)圖像來填充區(qū)域。 | 查看實例 ? |
round | 類似 repeat 值。如果無法完整平鋪所有圖像,則對圖像進行縮放以適應(yīng)區(qū)域。 | 查看實例 ? |
space | 類似 repeat 值。如果無法完整平鋪所有圖像,擴展空間會分布在圖像周圍 | |
initial | 將此屬性設(shè)置為默認值。查看 initial | 查看實例 ? |
inherit | 從父元素中繼承該屬性。 查看 inherit |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!
*請認真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。