Getting web front-end to combat: contextual relevance, and abbreviations as well as photographs and illustrations of the difference between the background image

I. Background property abbreviated format

1.backgound: background color background picture tiled associated mode positioning mode

2. Notes:

All values are omitted here, but requires at least a

3. What is the background associatively

By default, the background image will scroll with the scroll bars and scrolling, so if you do not, then we can change their way of association

4. Format:

background-attachment:值；

Value ranges:

scroll: defaults will be with scroll bars and scrolling.

fixed: do not scroll with the scroll bars and scrolling.

5. Example:

<!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： ⑦⑧④-⑦⑧③-零①②，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频

Getting web front-end to combat: contextual relevance, and abbreviations as well as photographs and illustrations of the difference between the background image

Second, shortcut keys

1.bc:background-color

2.bi:background-image

3.bgr:background-repeat

4.ba:background-arttachment

5.bg +: background :( behind five properties)

6.bp:background-position

Third, the difference between the background image and insert pictures

div.box$*2

Equivalent to

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

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

2. Distinction:

(1) background image is just a decoration, it will not take a position '; Insert Picture will take up a position

(2) positioning the background image attributes, position control can be performed; and inserting images without image position control properties, poor control

(3) Insert Picture semantic semantics stronger than the background image, so again among the companies to develop, if you want the picture to be indexed by search engines, it is recommended to use the Insert Picture.

<!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： ⑦⑧④-⑦⑧③-零①②，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频

Getting web front-end to combat: contextual relevance, and abbreviations as well as photographs and illustrations of the difference between the background image

Getting web front-end to combat: contextual relevance, and abbreviations as well as photographs and illustrations of the difference between the background image

Guess you like