css背景設置
阿新 • • 發佈:2019-01-30
直接 填充 12px 展示 背景透明 -c 範圍 none att
1、 背景顏色
- background-color:後面跟顏色屬性
2、 背景圖片
- background-image
屬性允許指定一個圖片展示在背景中(只有CSS3才可以多背景)可以和 background-color 連用。 如果圖片不重復的話,圖片覆蓋不到地地方都會被背景色填充。 如果有背景圖片平鋪,則會覆蓋背景顏色。 - 參數
- none:無背景(默認)
- url:使用絕對或相對地址指定背景圖像
3、 背景平鋪
- 即所選背景圖片是否填充整個樣式區域
- 語法
background-repeat : repeat | no-repeat | repeat-x | repeat-y
- 參數
- repeat : 背景圖像在縱向和橫向上平鋪(默認的)
- no-repeat : 背景圖像不平鋪
- repeat-x/y : 背景圖像在橫向/縱向上平鋪
4、 背景位置
- 調整背景圖片在區域內的樣式
- 語法
background-position : x坐標 y坐標
- 參數
- 使用top bottom left right center定位,沒有順序
background-position: top left; // 左上角 background-position: top; //只寫一個默認另一邊居中
- 直接寫像素
background-position: 12px 30px // x,y軸順序
- 使用top bottom left right center定位,沒有順序
5、 背景附著
- 設置背景是隨內容滾動還是固定
- background-attachment
- 參數
- scroll:滾動
- fixed:固定
以上背景可以簡寫,類似padding或margn屬性一樣,按照順序即可
background:背景顏色 背景圖片地址 背景平鋪 背景滾動 背景位置
6、背景透明(CSS3)
- CSS3支持背景半透明的寫法語法格式是:
- background: rgba(0,0,0,0.3);
最後一個參數是alpha 透明度 取值範圍 0~1之間
註意: 背景半透明是指盒子背景半透明, 盒子裏面的內容不收影響。
- background: rgba(0,0,0,0.3);
css背景設置