05 背景設定

2022-06-09 02:06:09 字數 1670 閱讀 4573

背景總結

一  背景位置[ 難點]

background-position：x座標 y座標;[ 引數可以使用方位名詞 和 精確數值 ]


精確數值:  百分數 或整數和單位標識組成的長度值


方位名詞: top  center bottom  left  right
1） 使用前提

必須先指定 background-image屬性
2）引數是方位名詞

1 如果只指定了乙個方位名詞，另乙個值預設居中對齊 [50% ]
2 left top  = top left 順序前後都可以
3）引數是數值

background-position: 50px; //水平50px 垂直居中


如果只指定乙個數值單位，該數值用於x座標，y座標預設居中 [50%]
4.4）引數混用

//x軸是數字 y軸只能是 top center bottom 


backgrount-position: 50px top|center|middle;


//y軸是數字 x軸只能是 left center right


backgrount-position: left|center|right 50px;
4.5）常用場景

超大背景圖  1920 * 1080


background-position: center top;


我們為了照顧所有的螢幕解析度，設定背景圖水平居中，保證最重要的資訊都可以展示。
二  常用背景設定1）背景顏色

background-color: 預定義的顏色值|十六進製制|rgb**;


//預設值 transparent 透明色
2）背景

background-image: url(路徑); 


//
3）背景平鋪

background-repeat:


repeat 


//1 水平垂直平鋪 [ 預設值 ]


no-repeat  //


2 不平鋪


repeat-x  //


3 水平平鋪


repeat-y  //


4 垂直平鋪
4）背景附著

1 背景滾動 background-attachment: scroll; [ 預設值 ]
2 背景固定 background-attachment：fixed;
5）簡寫

background: pink url(image/bird.png) no-repeat fixedcenter center;
6）背景透明

css3的書寫 ie9以下不支援


background: rgba(0,0,0,0.3);//是盒子背景的幫透明 而非盒子內容半透明


rgba red紅色 green綠色 blue藍色 alpha透明度 ( 取值0-1 ) 0.3表示透明度30%

css背景設定

顏色表示方法 background 1 red 英文單詞 2 ff0000 16進製制 3 rgb 255,0,0 3元色 4 rgb 100 0 0 百分比 背景起始位置 background origin padding box border box content box 邊框起始 內邊距起始...

css背景設定

1 background color 背景顏色 2 background image 背景 3 background repeat 背景重複 4 background position 背景位置 5 background size 背景尺寸 6 background attachment 背景粘附 ...

css背景設定

注 所有的 都在中實現 背景色 background color 顏色 背景 背景大小 background size 平鋪 重複 background repeat no repeat 此行表示不平鋪 背景位置 background position 傳值 x y xy可正可負 傳關鍵字 x ce...