web前端入門到實戰：背景關聯和縮寫以及插圖圖片和背景圖片的區別

時間 2019-12-22

標籤 web 前端入門實戰背景關聯縮寫以及插圖圖片區別欄目 HTML 简体版

原文原文鏈接

1、背景屬性縮寫的格式html

1.backgound:背景顏色背景圖片平鋪方式關聯方式定位方式前端

2.注意點：web

這裏的全部值均可以省略，可是至少須要一個ide

3.什麼是背景關聯方式學習

默認狀況下，背景圖片會隨着滾動條的滾動而滾動，若是不想這樣，那麼咱們能夠修改它們的關聯方式搜索引擎

4.格式：url

background-attachment:值；code

值的取值範圍：視頻

scroll：默認值，會隨着滾動條而滾動。htm

fixed:不會隨着滾動條滾動而滾動。

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;/*背景顏色  圖片地址  平鋪方式  關聯方式  定位方式*/

            /*這裏的全部值均可以省略，可是至少須要一個*/

            /*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前端開發學習Q-q-u-n： ⑦⑧④-⑦⑧③-零①②，分享學習的方法和須要注意的小細節，不停更新最新的教程和學習方法（詳細的前端項目實戰教學視頻

2、快捷鍵

1.bc:background-color

2.bi:background-image

3.bgr:background-repeat

4.ba:background-arttachment

5.bg+:background:(後面五個屬性)

6.bp:background-position

3、背景圖片和插入圖片的區別

div.box$*2

等價於

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

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

2.區別：

（1）背景圖片僅僅是一個裝飾，不會佔用位置‘；插入圖片會佔用位置

（2）背景圖片有定位屬性，可進行位置控制；而插入圖片沒有控制圖片位置的屬性，很差控制

（3）插入圖片的語義比背景圖片語義要強，因此再企業開發之中，若是你的圖片想要被搜索引擎收錄，那麼推薦使用插入圖片。

<!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">我是一個文字</div>

<hr>

<hr>

<hr>

<hr>

<div class="box2">

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

    我是一個文字

</div>

</body>

</html>
web前端開發學習Q-q-u-n： ⑦⑧④-⑦⑧③-零①②，分享學習的方法和須要注意的小細節，不停更新最新的教程和學習方法（詳細的前端項目實戰教學視頻

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。