Ⅰ background-color: -- 設置標簽的背景顏色

• rgba(0,0,0,0.65); -- (紅,緑,藍三原色,透明度)只能給背景設置透明度
• opacity: 0.65; -- 改變整個標簽的透明度

<style>

Ⅱ background-image: --設置標簽的背景圖片

• url("圖片網址"); -- 如果圖片的大小沒有標簽大，那么會自動在水平和錘子方向平鋪和填充

<style>

Ⅲ background-size: -- 設置寬、高

• 300px 300px; -- 第一個參數為寬度,第二個為高度
• 100% 100%; -- 設置跟隨網頁比例變化
• npx; -- 只寫一個默認是圖片的寬度,高度會同比例自動改變

Ⅳ background-repeat: -- 平鋪方式

• no-repeat; -- #不重復，背景圖片將僅顯示一次
• repeat-x; -- #背景圖片將在水平方向平鋪
• repeat-y; -- #背景圖片將在垂直方向平鋪
• 可以在服務端將一個大圖片截成小圖片，然后在客戶端基于平鋪屬性將小圖重復
• 這樣用戶就以為是一張大圖，如此，既節(jié)省了流量提升了速度，又不影響用戶訪問
• 例如很多網站的導航條都是用這種手法制作的

<style>

Ⅴ background-attachment: -- 背景圖片固定或滾動

• scroll; -- #默認值，背景圖片不會隨著滾動條的滾動而滾動
• fixed; -- #會隨著滾動條的滾動而滾動

<style>

默認不會自動給滾動

設置自動滾動

Ⅵ background-position: -- 控制背景圖片的位置

• background-position：水平方向的值，垂直方向的值;
• 方位名詞
  • 水平方向：left，center，right
  • 垂直方向：top，center，bottom
  • 如果只設置了一個關鍵詞，那么第二個值就是"center"
• 百分比
  • 第一個值是水平位置，第二個值是垂直位置
  • 左上角是 0% 0% , 右下角是 100% 100%
  • 如果只設置了一個值，另一個值就是50%
• 具體像素(一定要加px單位)
  • 例如：30px，50px等等
  • 第一個值是水平位置，第二個值是垂直位置。
  • 左上角是 0 0。單位是像素 (0px 0px) 或任何其他的 CSS 單位
  • 如果只設置了一個值，另一個值就是50%。
  • 可以混合使用%和position值
• inherit --設置從父元素繼承background屬性值

background

Ⅶ inherit -- 繼承background

• inherit -- 設置從父元素繼承background屬性值
  • 以上背景屬性的值均可以設置為inherit，代表從父元素繼承background屬性

總結

以上是生活随笔為你收集整理的css 背景图怎么设置自动填充满_CSS属性设置 -- 背景样式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。