<menu id="ycqsw"></menu><nav id="ycqsw"><code id="ycqsw"></code></nav>
<dd id="ycqsw"><menu id="ycqsw"></menu></dd>
    • <nav id="ycqsw"></nav>
    <menu id="ycqsw"><strong id="ycqsw"></strong></menu>
    <xmp id="ycqsw"><nav id="ycqsw"></nav>
    1. 長城號首頁
    2. 投稿

    html插入背景圖片怎么平鋪（html嵌入動態背景的方法）

    劉英 ? ? 投稿

    一、背景

    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>
    web前端入門到實戰：背景顏色、背景圖片、背景填充

    2.如何設置背景圖片？

    （1）在CSS中有一個叫做background-image:url();的屬性，就是專門用來設置背景圖片的。

    （2）注意：

    i.圖片的地址需要放在url（）的括號之中，圖片的地址可以是本地的地址，也可以是網絡的地址。

    ii.如果圖片的大小不足以覆蓋我們要求的大小，那么就會自動在水平和垂直方向進行平鋪和填充。

    iii.如果網頁上出現了圖片，那么瀏覽器會再次發送請求獲取圖片

    web前端入門到實戰：背景顏色、背景圖片、背景填充
     .p1{
 height:600px;
 width: 600px;
 background-color: red;
 background-image:url("image/play_tennis.jpg");
 }
 .........省略代碼........
 <p class="p1">我是試練</p>
    web前端入門到實戰：背景顏色、背景圖片、背景填充

    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>
    web前端入門到實戰：背景顏色、背景圖片、背景填充

    (3)應用場景：用來做背景的多個填充。通過背景圖片的平鋪來降低圖片的大小，提升網頁訪問速度

    贊 (0)

    相關推薦

    版權聲明：本文內容由互聯網用戶自發貢獻，該文觀點僅代表作者本人。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。如發現本站有涉嫌抄襲侵權/違法違規的內容， 請發送郵件至 舉報，一經查實，本站將立刻刪除。

    發表評論

    登錄后才能評論
    国产精品区一区二区免费