CSS背景-蒲公英云

CSS背景

背景

属性	描述
background	简写属性，作用是将背景属性设置在一个声明中。
background-attachment	背景图像是否固定或者随着页面的其余部分滚动。
background-color	设置元素的背景颜色。
background-image	把图像设置为背景。
background-position	设置背景图像的起始位置。
background-repeat	设置背景图像是否及如何重复。

第一个例子

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> body{ 
            background-color: red
        }
        div{ 
            widows:50px;
            height:50px;
            background-color:blue
        }
    </style>
</head>
<body>
    <div> </div>
</body>
</html>

aHR0cHM6Ly93czEuc2luYWltZy5jbi9sYXJnZS8wMDZReW4yUWx5MWc1cHI5OXV3NzZqMzFoYzBtNDB0OS5qcGc

可以看到主体的颜色是red, 其中一部分是blue

第二个例子

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> body{ 
            /*background-color: red*/
            background-image: url("https://wx3.sinaimg.cn/mw690/719f9f6bly1g5p3mpvkxmj21w02ioqv5.jpg");
            /*图片居中*/
            background-position: center;
            /*图片不重复*/
            background-repeat: no-repeat;
        }
        /*div{ widows:50px; height:50px; background-color:blue }*/
    </style>
</head>
<body>
    <div> </div>
</body>
</html>

aHR0cHM6Ly93czEuc2luYWltZy5jbi9sYXJnZS8wMDZReW4yUWx5MWc1cHJ6ZW93cDRqMzFoYzBvbnFyei5qcGc

可以写成一句话

background: url("https://wx3.sinaimg.cn/mw690/719f9f6bly1g5p3mpvkxmj21w02ioqv5.jpg") center no-repeat

背景属性

属性	描述
background	简写属性，作用是将背景属性设置在一个声明中。
background-attachment	背景图像是否固定或者随着页面的其余部分滚动。
background-color	设置元素的背景颜色。
background-image	把图像设置为背景。
background-position	设置背景图像的起始位置。
background-repeat	设置背景图像是否及如何重复。