<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
body {
background-color: rgb(223, 223, 223);
}
.city {
width: 500px;
height:500px;
background-color: rgb(233, 203, 158);
padding-left: 20px;
/* border: 10px rgb(238, 7, 7) double; */
/* 背景图片地址*/
background-image:url("https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png");
/* 背景图片大小*/
background-size:30%;/* 0％~100％之间的任何值，将背景图片宽高按百分比显示，当设置一个值的时候同也将其作为图片宽度来等比缩放 */
background-size:50px;/* 第一个值为宽，第二个值为高为auto默认将其作为图片宽度来等比缩放 */
background-size:50px 30px;/* 第一个值为宽，第二个值为高，当设置一个值时，将其作为图片宽度来等比缩放 */
/*background-size:cover;/* 将背景图片等比缩放填满整个容器 */
/* background-size:contain;/* 将背景图片等比缩放至某一边紧贴容器边缘 */
/* background-size:auto;/* 默认值，不改变背景图片的高度和宽度 */
/* 背景图片的平铺方式 */
background-repeat: repeat-x; /* 横向重复平铺 */
background-repeat: repeat-y; /* 纵向重复平铺 */
background-repeat: no-repeat; /* 不重复平铺，只显示一个图片 */
/* 设置背景图片的位置*/
background-position:center; /* 上下左右居中*/
background-position: top left right bottom; /* 上下左右任意组合定位*/
background-position-x: 10px; /* 左边x坐标起点定位*/
background-position-y: 10px; /* 右边x坐标起点定位*/
background-attachment:scroll; /* 滚动条*/
background-attachment:fixed; /* 固定*/
}
</style>
<body>
<div class="city">
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
body {
background-color: rgb(223, 223, 223);
}
.city {
width: 500px;
height:500px;
/* 【1】-【线性渐变】 */
/* linear-gradient() 可添加多个颜色 */
background-image:linear-gradient(red,yellow);
background-image:linear-gradient(red,yellow,black);
/* 方向：to left（向左）,to right,to bottom,to top,xxxdeg deg(度数)*/
background-image:linear-gradient(to top left,red,yellow,black);
background-image:linear-gradient(0.35turn,red,yellow,black); /*圈的角度*/
/* 【2】-【径向渐变】*/
/* redial-gradient(大小 at 位置,颜色 位置，颜色 位置，颜色 位置) */
/* 大小 circle圆形 elllipse椭圆 closest-side近边 closest-corner近角 farthest-side远边 farthest-corner圆角 */
/*位置*/
background: radial-gradient( #f00,#ff0,#0f0);
}
</style>
<body>
<div class="city">
</div>
</body>
</html>
![门户通专访草根站长九天狼：做站贵在坚持[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)