css background 背景知識詳解

2022-03-17 10:03:22 字數 2589 閱讀 5689

我們知道元素有前景色color,與之對應的還有背景色,通過background我們可以為元素新增實色(background-color)和任意多個背景(background-image)。

css 背景常見屬性

background-color 屬性設定元素的背景顏色。它會會填充元素的內容、內邊距和邊框區域,擴充套件到元素邊框的外邊界(但不包括外邊距)。如果邊框有透明部分(如虛線邊框),會透過這些透明部分顯示出背景色。如果不想它包含邊框可以用它的另乙個屬性clip來處理。

看效果圖,我們知道預設背景顏色會填充邊框的。

它的取值有:

1、關鍵字:red,blue等

2、十六進製制值:#ff0000

3、transparent值

4、inherit:從父元素那繼承的值

5、rgb、rgba(如rgba(255,255,0,.8))、hsl、hsla(如hsla(360, 50%, 50%, .5))

等background-position屬性顧名思義是用來控制背景的位置,它同時設定了元素和的原點,而原點決定了元素和中某一點的水平和垂直座標。預設情況原點位於左上角。也就是說元素的左上角和的左上角是對齊的。

它的取值:

一、它的五個關鍵字:top、left、right、bottom、center。二二取值都可以成為它們的屬性值。

上面的關鍵字如果只設定乙個,那另外乙個也會取相同的值。關鍵字的順序不重要,left bottom和bottom left意思一樣。

二、百分比值:

第乙個值是水平位置,第二個值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。只設定乙個值,則只用來設定水平位置,而垂直位置會預設設為center。

三、畫素或其他css單位

第乙個值是水平位置,第二個值是垂直位置。左上角是 0 0。單位是畫素 (0px 0px) 或任何其他的 css 單位。如果您僅規定了乙個值,另乙個值將是50%。您可以混合使用 % 和 position 值。

此外還可以運用正負值,將左上角定位到元素外部,或將右下角推到元素外部。

background-position: top right;background-repeat:no-repeat;
效果圖:

background-repeat 屬性設定如何重複背景影象。預設背景影象在水平和垂直方向上重複。

它的取值有:

repeat:預設值

repeat-x:水平方向重複

repeat-y:水平方向重複

no-repeat:影象只出現一次

inherit:繼承

此外css3還新增二個值:

下圖是值為background-repeat:space的效果圖:

下面是值為background-repeat:repeat-y的效果圖:

css3新增的背景尺寸,顧名思義就是來調整的尺寸。

它的取值:

百分比:%

畫素值:第乙個值設定寬度,第二個值設定高度。

上面最後二個屬性值會將很小的拉得很大,so會導致失真。

該屬性規定元素內背景是否隨元素滾動而移動。預設值是scroll。

它的值:

scroll

fixed:背景影象不會隨元素移動。通常應用給body元素中心位置新增水印等,讓水印不隨頁面滾動而移動。

inherit

background-clip 屬性規定背景的繪製區域。

它的取值:

content-box:背景被裁剪到內容框

border-box:背景被裁剪到邊框盒

padding-box:背景被裁剪到內邊距

background-color:yellow;background-clip:content-box;padding:15px;
上面的**給容器增加了15px的內邊距後,背景被裁剪了內容區域裡,

效果圖如下:

background-origin 屬性規定 background-position 屬性相對於什麼位置來定位。

取值:content-box:背景影象相對於內容框來定位

border-box:背景影象相對於邊框來定位

padding-box:背景影象相對於內邊距框來定位

如果背景影象的 background-attachment 屬性為 "fixed",則該屬性沒有效果。

background:linear-gradient

background:radial-gradient

具體解釋看這一篇

控制分離元素的顯示效果

CSS background背景相關屬性

1 background背景相關 background color 背景顏色 顏色單詞 red blue green.十六進製制值 0 9 a f 三原色值 rgb 0,0,0 0 255 example background color pink background color ccc back...

CSS background系列屬性

關於顏色 能夠用英語單詞來表述的顏色都是簡單的顏色 用rgb方法來表示 光學顯示器每個畫素都是由三原色的發光原件組成的,靠明亮度不同調成不同顏色。用逗號隔開,r,g,b的值,每個值的取值範圍0 255,一共256個值。如果此項值是255,就說明是純色。紅色 background color rgb ...

css background屬性詳細解析

css可以控制html中各元素的背景顯示,包括背景顏色 背景 背景重複 背景定位和背景關聯5項。在css中,可以通過background屬性對這5項統一控制,也可通過這5項對應的屬性分別控制。下面我們先了解一下css中的這5個屬性。css可以為所有元素設定背景色,從body 一直到em 和a 等內聯...