首頁 > web前端 > css教學 > 主體

CSS背景屬性有哪些? css背景屬性的總結(附程式碼)

不言
發布: 2018-08-04 10:52:40
原創
5804 人瀏覽過

css背景屬性是用來定義HTML元素背景的,那麼,css背景屬性有哪些呢?像是css背景顏色屬性,css圖片背景屬性都屬於css背景屬性,本文將跟大家總結css背景屬性中相關的屬性。

#首先,我們先來看看css相關的屬性:

  • #background-color: css設定背景顏色

  • background-image: css設定圖片背景

  • #background-repeat: css設定背景圖片是否重複及如何重複

  • #background-position: css設定背景圖像的位置

  • background-attachment: 背景圖像是否固定或隨著頁面的其餘部分滾動

  • #background: 簡寫屬性,作用是將背景屬性設定在一個宣告中

元素背景的範圍:

背景會填滿元素的內容、內邊距和邊框區域,擴展到元素邊框的外邊界(但不包括外邊距)。如果邊框有透明部分(如虛線邊框),會透過這些透明部分顯示出背景色。

瀏覽器支援:

所有主要瀏覽器都支援背景屬性。

注意: IE7和更早的版本不支援"繼承"的值(inherit)。 IE8需要定義!DOCTYPE。 IE9支持"繼承"。

css背景顏色:

background-color 屬性用來定義元素的背景顏色。

body {background-color: #b0c4de;}
登入後複製

CSS中,顏色值通常以以下方式定義:

  • #十六進位- 如:#ff0000

  • RGB - 如:rgb(255,0,0)

  • 顏色名稱- 如:red

  • 預設- transparent,透明之意。如果一個元素沒有指定背景色,那麼背景就是透明的。

  • inherit 從父元素繼承背景顏色,這個在IE上有相容問題。

css圖片背景:

background-image 屬性用來定義元素的背景圖片。

預設地,背景圖片位於元素的左上角,並在水平和垂直方向上重複。

body {background-image: url('paper.gif');}
登入後複製

提示:背景顏色和背景圖片是可以共存的,請設定一種可用的背景顏色,這樣的話,假如背景圖像不可用,頁面也可獲得良好的視覺效果。

body {background-image: url('paper.gif');background-color:#fff;}
登入後複製

屬性值:

  • none - 預設無背景圖片

  • url('image path') - 圖片的可存取路徑,可以使用網路位址,相對路徑位址,絕對路徑位址

  • inherit - 從父元素繼承

##css背景重複:

如果需要對背景普片平鋪,可以使用background-repeat屬性。

body {
    background-image: url('gradient2.png');
    background-repeat: repeat-x;
}
登入後複製

屬性值:

  • repeat 導致影像在水平垂直方向上都平鋪,預設。

  • repeat-x 和 repeat-y 分別使背景影像只在水平或垂直方向上重複。

  • no-repeat 則不允許影像在任何方向上平鋪。

  • inherit 從父元素繼承。

css背景定位:

css背景定位:

background-position 屬性用來控制背景圖片的位置,一般配合background-repeat: no-repeat;使用。

body {
    background-image: url('img_tree.png');
    background-repeat: no-repeat;
    background-position: right top;
}
登入後複製

為 background-position 屬性提供值有很多方法。首先,可以使用一些關鍵字:top、bottom、left、right 和 center。通常,這些關鍵字會成對出現,但也不總是這樣。也可以使用長度值,如 100px,最後也可以使用百分數值。

關鍵字:

圖片放置關鍵字最容易理解,其作用如其名稱所顯示的。例如,top right 使影像放置在元素內邊距區的右上角。

根據規範,位置關鍵字可以以任何順序出現,只要保證不超過兩個關鍵字,一個對應水平方向,另一個對應垂直方向,top right 和 right top 是等效的。

如果只出現一個關鍵字,則認為另一個關鍵字是 center。

百分比:

百分數值的表現方式較為複雜。假設你希望用百分數值將圖像在其元素中居中:

body { 
    background-image: url('/eg_bg_03.gif');
    background-repeat: no-repeat;
    background-position: 50% 50%;
}
登入後複製

如果圖像位於 0% 0%,其左上角將放在元素內邊距區的左上角。如果影像位置是 100% 100%,會使影像的右下角放在右邊距的右下角。

把一個圖像放在水平方向2/3、垂直方向1/3 處:

body { 
    background-image: url('/eg_bg_03.gif');
    background-repeat: no-repeat;
    background-position: 66% 33%;
}
登入後複製

如果只提供一個百分數值,所提供的這個值將用作水平值,垂直值將假設為50%。

###長度值:#########長度值解釋的是元素內邊距區左上角的偏移。偏移點是影像的左上角。 ###

比如,如果设置值为 50px 100px,图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上。

css背景固定:

background-attachment 属性设置背景图片是否固定或随页面的其余部分滚动。

body {
    background-image:url('image.png');
    background-repeat:no-repeat;
    background-attachment:fixed;
}
登入後複製

属性值:

  • scroll 默认。背景图像会随着页面其余部分的滚动而移动。

  • fixed 当页面的其余部分滚动时,背景图像不会移动。

  • inherit 从父元素继承。

简写属性:

background 属性在一个声明中设置所有背景属性。

body { 
    background: #00FF00 url('bgimage.gif') no-repeat fixed top;
}
登入後複製

如果不设置其中的某个值,也不会出问题,比如 background:#ff0000 url('smiley.gif'); 也是允许的。

通常建议使用这个属性,而不是分别使用单个属性,因为这个属性在较老的浏览器中能够得到更好的支持,而且需要键入的字母也更少。

相关文章推荐:

你不知道的CSS背景—css背景属性全解

详解css之背景background属性

以上是CSS背景屬性有哪些? css背景屬性的總結(附程式碼)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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