<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>36-背景定位属性</title> <style> div{ /* 500px;*/ height: 500px; } .box1{ /*background-color: red;*/ /*background-image: url(images/girl.jpg);*/ /*background-repeat: no-repeat;*/ /*background-position: left top;*/ /*background-position: right top;*/ /*background-position: right bottom;*/ /*background-position: left bottom;*/ /*background-position: center center;*/ /*background-position: left center;*/ /*background-position: center top;*/ /*background-position: 100px 0;*/ /*background-position: 100px 200px;*/ /*background-position: -100px -100px;*/ background-image: url(images/yxlm.jpg); background-position: center top; } </style> </head> <body> <!-- 1.如何控制背景图片的位置? 在CSS中有一个叫做background-position:属性, 就是专门用于控制背景图片的位置 2.格式: background-position: 水平方向 垂直方向; 3.取值 2.1具体的方位名词 水平方向: left center right 垂直方向: top center bottom 2.2具体的像素 例如: background-position: 100px 200px; 记住一定要写单位, 也就是一定要写px 记住具体的像素是可以接收负数的 快捷键: bp background-position: 0 0; 注意点: 同一个标签可以同时设置背景颜色和背景图片, 如果颜色和图片同时存在, 那么图片会覆盖颜色 --> <div class="box1"> <!--<img src="images/yxlm.jpg" alt="">--> </div> </body> </html>