背景顏色和屬性包含以下內容:
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基礎樣式四
上次我們講到了相對定位 這次我們了解下絕對定位 絕對定位 絕對定位會脫離文件流。所以之前的位置就會被後面的內容給填補 絕對定位的元素的位置相對於最近的已定位祖先元素,如果元素沒有已定位的祖先元素,那麼它的位置相對於最初的包含塊。浮動 如圖 浮動也會像絕對定位那樣脫離文字流,就相當於飄了起來,在天上,...