一、背景
1.如何設置標籤的背景顏色
（1）在CSS中有一個background-color：屬性值；，就是專門用來設置標籤的背景顏色。
（2）取值：具體單詞、RGB、RGBA、十六進制
例子：
<style>
.p1{
background-color: red;
}
.p2{
background-color: rgb(0,255,0);
}
.p3{
background-color: rgba(0,0,255,1);
}
.p4{
background-color: #00ffff;
}
</style>
</head>
<body>
<p class="p1">我是試練</p>
<p class="p2">我是試練</p>
<p class="p3">我是試練</p>
<p class="p4">我是試練</p>
2.如何設置背景圖片？
（1）在CSS中有一個叫做background-image:url();的屬性，就是專門用來設置背景圖片的。
（2）注意：
i.圖片的地址需要放在url（）的括號之中，圖片的地址可以是本地的地址，也可以是網絡的地址。
ii.如果圖片的大小不足以覆蓋我們要求的大小，那麼就會自動在水平和垂直方向進行平鋪和填充。
iii.如果網頁上出現了圖片，那麼瀏覽器會再次發送請求獲取圖片
.p1{
height:600px;
width: 600px;
background-color: red;
background-image:url("image/play_tennis.jpg");
}
.........省略代碼........
<p class="p1">我是試練</p>
3.背景平鋪：我們如何設置背景圖片？
（1）在CSS中有一個叫做background-repeat的屬性，就是專門用來控制背景圖片的平鋪方式的。
取值：
repeat：默認，在水平和垂直方向上都需要平鋪。
no-repeat:在水平和垂直方向上都不需要平鋪。
repeat-x:只在水平方向上平鋪。
repeat-y:只在垂直方向上平鋪。
例子：
.p1{
height:1000px;
width: 600px;
background-color: red;
background-image:url("image/play_tennis.jpg");
/*background-repeat:repeat;!*默認情況下就是repeat,這個意思就是圖片大小不變，鋪滿指定的區域即可*!*/
/*background-repeat: no-repeat;!*這個意思就是圖片就鋪一張，然後有地方沒填上的就空着*!*/
background-repeat:repeat-x;
}
.........省略代碼........
<p class="p1">我是試練</p>
(3)應用場景：用來做背景的多個填充。通過背景圖片的平鋪來降低圖片的大小，提升網頁訪問速度
原創文章，作者：投稿專員，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/255921.html
微信掃一掃 
支付寶掃一掃 