CSS基础(part9)--CSS背景
生活随笔
收集整理的這篇文章主要介紹了
CSS基础(part9)--CSS背景
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
學習筆記，僅供參考，有錯必糾
文章目錄
- CSS
- CSS背景
- 背景顏色(color)
- 背景圖片(image)
- 背景平鋪(repeat)
- 背景位置(position)
- 背景附著(attachment)
- 背景簡寫
- 背景透明(CSS3特性)
CSS
CSS背景
背景顏色(color)
語法：
background-color:顏色值;默認值為transparent(透明)
背景圖片(image)
語法：
background-image : none | url (url)參數none：無背景圖（默認的）；
參數url：使用絕對或相對地址指定背景圖像。
背景平鋪(repeat)
語法：
background-repeat : repeat | no-repeat | repeat-x | repeat-y參數：
| repeat | 背景圖像在縱向和橫向上平鋪（默認的） |
| no-repeat | 背景圖像不平鋪 |
| repeat-x | 背景圖像在橫向上平鋪 |
| repeat-y | 背景圖像在縱向平鋪 |
背景位置(position)
語法：
background-position : length || length background-position : position || position參數length：百分數 | 由浮點數字和單位標識符組成的長度值
參數position：方位名詞 top | center | bottom | left | center | right
注意事項：
- 使用該屬性前，必須先指定background-image屬性；
- position后面是x坐標和y坐標。 可以使用方位名詞或者精確單位；
- 如果指定兩個值，兩個值都是方位名字，則兩個值前后順序無關，比如left top和top left效果一致；
- 如果只指定了一個方位名詞，另一個值默認居中對齊；
- 如果position后面是精確坐標， 那么第一個肯定是 x，第二的一定是y；
- 如果只指定一個數值，那該數值一定是x坐標，另一個默認垂直居中；
- 如果指定的兩個值是精確單位和方位名字混合使用，則第一個值是x坐標，第二個值是y坐標。
背景附著(attachment)
語法：
background-attachment : scroll | fixed參數scroll：背景圖像是隨對象內容滾動；
參數fixed：背景圖像固定。
背景簡寫
背景屬性值的書寫順序沒有強制性，但是為了可讀性，可以采用如下簡寫順序：
background: 背景顏色 背景圖片地址 背景平鋪 背景滾動 背景位置;- 舉個例子
HTML代碼：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>CSS背景</title><style>.demo1 {width: 1000px;height: 1000px;background: pink url("image/TX.jpg") no-repeat fixed left center;}</style> </head> <body><h1>歡迎來到沙雕樂園</h1><div class="demo1"><div>我是文字</div><div>我是文字</div><div>我是文字</div><div>我是文字</div><div>我是文字</div><div>我是文字</div><div>我是文字</div><div>我是文字</div><div>我是文字</div><div>我是文字</div><div>我是文字</div><div>我是文字</div><div>我是文字</div><div>我是文字</div><div>我是文字</div><div>我是文字</div><div>我是文字</div></div></body> </html>頁面：
鼠標滾輪向下滑動一點：
Very Well！ 得到了我們都想要的效果~
背景透明(CSS3特性)
語法：
background: rgba(0, 0, 0, 0.3);注意，0.3表示的是透明度，其取值范圍 0~1之間；我們習慣把0.3 的 0 省略掉，寫成 background: rgba(0, 0, 0, .3);
總結
以上是生活随笔為你收集整理的CSS基础(part9)--CSS背景的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 水星 MW326R V1~V2 无线路由
- 下一篇： 海边看日出的朋友圈文案213个