web前端入門(mén)到實(shí)戰(zhàn)：背景關(guān)聯(lián)和縮寫(xiě)以及插圖圖片和背景圖片的區(qū)別

發(fā)布時(shí)間：2020-08-06 15:18:28 來(lái)源：網(wǎng)絡(luò) 閱讀：417 作者：前端向南欄目：web開(kāi)發(fā)

一、背景屬性縮寫(xiě)的格式

1.backgound:背景顏色背景圖片平鋪方式關(guān)聯(lián)方式定位方式

2.注意點(diǎn)：

這里的所有值都可以省略，但是至少需要一個(gè)

3.什么是背景關(guān)聯(lián)方式

默認(rèn)情況下，背景圖片會(huì)隨著滾動(dòng)條的滾動(dòng)而滾動(dòng)，如果不想這樣，那么我們可以修改它們的關(guān)聯(lián)方式

4.格式：

background-attachment:值；

值的取值范圍：

scroll：默認(rèn)值，會(huì)隨著滾動(dòng)條而滾動(dòng)。

fixed:不會(huì)隨著滾動(dòng)條滾動(dòng)而滾動(dòng)。

5.例子：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>d99_background_abbreviation</title>

    <style>

        div{

            width: 1100px;

            height:5000px;

            background:red url("image/snow.jpg") no-repeat fixed center center;/*背景顏色  圖片地址  平鋪方式  關(guān)聯(lián)方式  定位方式*/

            /*這里的所有值都可以省略，但是至少需要一個(gè)*/

            /*background-attachment: fixed;*/

        }

</style>

?

</head>

<body>

<div>

    <br>

    <br>

    <br>

    <br>

    <br>

    <br>

    <br>

    <br>

    <br>

    <br>

    <br>

    <br>

    <br>

    <br>

    <br>

    <br>

    <br>

    <br>

    <br>

    <br>

    <br>

    rhuyrt

</div>

</body>

</html>
web前端開(kāi)發(fā)學(xué)習(xí)Q-q-u-n： ⑦⑧④-⑦⑧③-零①②，分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)，不停更新最新的教程和學(xué)習(xí)方法（詳細(xì)的前端項(xiàng)目實(shí)戰(zhàn)教學(xué)視頻

web前端入門(mén)到實(shí)戰(zhàn)：背景關(guān)聯(lián)和縮寫(xiě)以及插圖圖片和背景圖片的區(qū)別

二、快捷鍵

1.bc:background-color

2.bi:background-image

3.bgr:background-repeat

4.ba:background-arttachment

5.bg+:background:(后面五個(gè)屬性)

6.bp:background-position

三、背景圖片和插入圖片的區(qū)別

div.box$*2

等價(jià)于

<div class="box1"></div>

<div class="box2"></div>

2.區(qū)別：

（1）背景圖片僅僅是一個(gè)裝飾，不會(huì)占用位置‘；插入圖片會(huì)占用位置

（2）背景圖片有定位屬性，可進(jìn)行位置控制；而插入圖片沒(méi)有控制圖片位置的屬性，不好控制

（3）插入圖片的語(yǔ)義比背景圖片語(yǔ)義要強(qiáng)，所以再企業(yè)開(kāi)發(fā)之中，如果你的圖片想要被搜索引擎收錄，那么推薦使用插入圖片。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>d100_difference_of_img_label_and_background_image</title>

    <style>

        div{

            width:800px;

            height: 500px;

        }

        .box1{

            background-image: url("image/snow.jpg");

        }

</style>

</head>

<body>

<div class="box1">我是一個(gè)文字</div>

<hr>

<hr>

<hr>

<hr>

<div class="box2">

    <img src="image/snow.jpg" alt="">

    我是一個(gè)文字

</div>

</body>

</html>
web前端開(kāi)發(fā)學(xué)習(xí)Q-q-u-n： ⑦⑧④-⑦⑧③-零①②，分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)，不停更新最新的教程和學(xué)習(xí)方法（詳細(xì)的前端項(xiàng)目實(shí)戰(zhàn)教學(xué)視頻

web前端入門(mén)到實(shí)戰(zhàn)：背景關(guān)聯(lián)和縮寫(xiě)以及插圖圖片和背景圖片的區(qū)別

向AI問(wèn)一下細(xì)節(jié)

web前端入門(mén)到實(shí)戰(zhàn)：背景關(guān)聯(lián)和縮寫(xiě)以及插圖圖片和背景圖片的區(qū)別

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽