CSS基礎(四) 背景樣式

2021-09-01 09:24:25 字數 2082 閱讀 6850

背景顏色和屬性包含以下內容:

1、background-color:背景顏色,可以針對布局標籤以及整個body進行顏色控制,改變背景顏色,而css中的color則是控制文字的顏色

注意:background-image與img的區別:

1、background-image可以設定背景,可以在背景的基礎上進行操作,例如新增文字等

2、img不能在上面進行任何操作

以下是例項:

這是乙個區塊

背景顏色與文字顏色同時控制

這是背景影象

在使用background-image時,背景會重複填充

1、background-repeat:背景重複

-repeat:背景影象在縱向和橫向上平鋪(填充)-預設

-no-repeat:背景影象不平鋪

-repeat-x:背景影象在橫向上(水平方向)平鋪

-repeat-y:背景影象在縱向上(垂直方向)平鋪

以下是例項:

2、background-position:背景定位

background-position:x  y,x表示x軸(水平軸)上的偏移,y表示y軸(垂直軸)上的偏移

2.1、x軸可以使用left、center、right或精確數值

2.2、y軸可以使用top、center、bottom或精確數值

2.3、x軸可以給精確數值,數值為正則向右偏移,數值為負向左偏移

2.4、y軸可以給精確數值,數值為正則向下偏移,數值為負向上偏移

京東**

1、background-attachment:背景固定

-scroll    預設值,背景影象會隨著頁面其餘部分的滾動而移動

-fixed    當頁面的其餘部分滾動時,背景影象不會移動

注意:background-attachment不僅對body背景可以固定,同時也可以對標籤進行固定

以下是例項:(顯示自己可以看效果)

背景**的簡寫規則:background:顏色  路徑  重複   偏移   固定,分別對應了color、url()、repeat、position以及attachment,位置可以互換,中間以空格分隔

2.1、單個background屬性控制,則可以寫成background:單個屬性;(color、url()、repeat、center center、fixed)

2.2、多個background屬性控制,則可以寫成background:#ccc url(images/aaa.jpg) no-repeat right center fixed,中間需要空格隔開;

2.3、background屬性可以互換位置,不影響顯示效果,偏移的兩個值是必須在一起的,不可分開

以下是例項:

css背景樣式css背景樣式

css背景樣式 css背景樣式 序號中文說明 標記語法 1背景顏色2背景 3背景重複 4背景固定 5背景定位 6背影樣式 1 背景顏色 background color 語法 說明 引數取值和顏色屬性一樣 注意 在 html當中,要為某個物件加上背景色只有一種辦法,那就是先做乙個 在 中設定完背景色...

CSS背景樣式基礎用法

css背景類樣式 1 背景 backgroung color url 位址 2 背景重複 background repeat repeat x repeat y no repeat 只在x方向重複顯示 只在y方向重複顯示 不重複,只顯示一次。3 背景布局 background position 取值...

css基礎樣式四

上次我們講到了相對定位 這次我們了解下絕對定位 絕對定位 絕對定位會脫離文件流。所以之前的位置就會被後面的內容給填補 絕對定位的元素的位置相對於最近的已定位祖先元素,如果元素沒有已定位的祖先元素,那麼它的位置相對於最初的包含塊。浮動 如圖 浮動也會像絕對定位那樣脫離文字流,就相當於飄了起來,在天上,...