Ⅰ background-color: -- 設(shè)置標(biāo)簽的背景顏色

• rgba(0,0,0,0.65); -- (紅,緑,藍(lán)三原色,透明度)只能給背景設(shè)置透明度
• opacity: 0.65; -- 改變整個(gè)標(biāo)簽的透明度

<style>

Ⅱ background-image: --設(shè)置標(biāo)簽的背景圖片

• url("圖片網(wǎng)址"); -- 如果圖片的大小沒有標(biāo)簽大，那么會(huì)自動(dòng)在水平和錘子方向平鋪和填充

<style>

Ⅲ background-size: -- 設(shè)置寬、高

• 300px 300px; -- 第一個(gè)參數(shù)為寬度,第二個(gè)為高度
• 100% 100%; -- 設(shè)置跟隨網(wǎng)頁(yè)比例變化
• npx; -- 只寫一個(gè)默認(rèn)是圖片的寬度,高度會(huì)同比例自動(dòng)改變

Ⅳ background-repeat: -- 平鋪方式

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

<style>

Ⅴ background-attachment: -- 背景圖片固定或滾動(dòng)

• scroll; -- #默認(rèn)值，背景圖片不會(huì)隨著滾動(dòng)條的滾動(dòng)而滾動(dòng)
• fixed; -- #會(huì)隨著滾動(dòng)條的滾動(dòng)而滾動(dòng)

<style>

默認(rèn)不會(huì)自動(dòng)給滾動(dòng)

設(shè)置自動(dòng)滾動(dòng)

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

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

background

Ⅶ inherit -- 繼承background

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。