背景属性
''' background-color: cornflowerblue background-image: url('1.jpg'); background-repeat: no-repeat;(repeat:平铺满) background-position: right top（20px 20px）;(横向：left center right)(纵向：top center bottom) 简写：<body style="background: 20px 20px no-repeat #ff4 url('1.jpg')"> <div style=" 300px;height: 300px;background: 20px 20px no-repeat #ff4 url('1.jpg')"> '''
注意：如果将背景属性加在body上，要记得给body加上一个height，否则结果异常，这是因为body为空，无法撑起背景图片；另外，如果此时要设置一个width＝100px，你也看不出效果，除非你设置出html。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> html{ background-color: antiquewhite; } body{ width: 100px; height: 600px; background-color: deeppink; background-image: url(1.jpg); background-repeat: no-repeat; background-position: center center; } </style> </head> <body> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="keywords" content="css的背景属性"> <meta name="description" content="study"> <meta http-equiv="Refresh" content="1800;https://www.baidu.com"> <meta http-equiv="x-ua-compatible" content="IE=EmulateIE7"> <title>标题</title> <link rel="stylesheet" href="day108.css"> <link rel="icon" href="https://www.baidu.com/favicon.ico"> <!--<script src="js.js"></script>--> </head> <body> <p>捭阖之术</p> <div class="back"></div> <span></span> </body> </html>
p{ color: red; } p{ color: #d900ff; font-size: larger; } p{ color: rgb(0, 204, 255); font-size: 50%; } /*rgb三原色，分别是red/green/blue，各自数值区间为0-255*/ p{ color: rgba(188, 188, 80, 0.9); /*文字颜色*/ font-size: 30px; /*文字大小*/ font-family: "Times New Roman"; /*文字字体*/ font-weight: lighter; /*设置文本的粗细，最高900*/ font-style: oblique; /*字体样式*/ background-color: beige; /*背景颜色*/ } /*a代表透明度的意思，0-1，数字越大透明度越低*/ .back{ border: 1px solid red; /*边框粗细1px为实线且是红色*/ width: 800px; /*宽800px*/ height: 800px; /*高800px*/ background-image: url("300x300.jpeg"); /*背景图的url*/ background-repeat: no-repeat; /*是否平铺，no-repeat为不平铺，repeat-x为x轴平铺，repeat-y为y轴平铺*/ background-position: 0 center; /*第一个参数为离左边框的距离，第二个参数为离上边框的距离*/
/*background: url("300x300.jpeg") no-reprat 0 center;*/ } span{ display: inline-block; /*内联标签没有宽高属性，通过display可对块级标签和内联标签属性进行更改*/ width: 100px; height: 100px; background-image: url("icon.jpeg"); background-position: -295px 260px; /*一张图有多个icon的话，此时可以在浏览器自行调试，选择对应需要的icon*/
}