03背景.html
<!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: #ccc; } div { width: 400px; height: 500px; background-color: pink; background-image: url(img/l.jpg); background-repeat: no-repeat; /*利用方位名词来改变背景图片的位置*/ background-position: left top;/* 默认左上角*/ background-position: bottom right; /*右下角 方位名词不分顺序*/ background-position: center center; background-position: left; /*方位名词只写一个 另一个默认为center*/ background-position: 10px 30px; /*第一个为x坐标 第二个为y坐标*/ background-position: 10px center; } </style> </head> <body> <div></div> </body> </html>
04背景案例.html
<!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-image: url(img/ms.jpg); background-position: center -30px; background-repeat: no-repeat; background-color: #000; 设置背景图像是否随内容滚动 background-attachment: fixed; background-attachment: scroll; 默认是滚动的*/ background: #000 url(img/ms.jpg) no-repeat fixed center -30px; } p { font-size: 22px; color: #fff; } </style> </head> <body> <p>内容部分</p> <p>内容部分</p> <p>内容部分</p> <p>内容部分</p> <p>内容部分</p> <p>内容部分</p> <p>内容部分</p> <p>内容部分</p> <p>内容部分</p> <p>内容部分</p> <p>内容部分</p> <p>内容部分</p> <p>内容部分</p> <p>内容部分</p> <p>内容部分</p> <p>内容部分</p> <p>内容部分</p> <p>内容部分</p> <p>内容部分</p> <p>内容部分</p> <p>内容部分</p> <p>内容部分</p> <p>内容部分</p> <p>内容部分</p> <p>内容部分</p> <p>内容部分</p> <p>内容部分</p> <p>内容部分</p> <p>内容部分</p> <p>内容部分</p> <p>内容部分</p> <p>内容部分</p> <p>内容部分</p> <p>内容部分</p> <p>内容部分</p> <p>内容部分</p> <p>内容部分</p> <p>内容部分</p> <p>内容部分</p> <p>内容部分</p> <p>内容部分</p> <p>内容部分</p> <p>内容部分</p> <p>内容部分</p> <p>内容部分</p> <p>内容部分</p> <p>内容部分</p> <p>内容部分</p> <p>内容部分</p> <p>内容部分</p> <p>内容部分</p> <p>内容部分</p> <p>内容部分</p> <p>内容部分</p> <p>内容部分</p> <p>内容部分</p> </body> </html>