效果：在页面固定位置，展示图片的某个局部
image.png
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.img{
/*图片位置*/
background-image: url("4.jpeg");
/*高度*/
height: 100px;
/*宽度*/
width: 100px;
/*背景图片是否重复展示*/
background-repeat: no-repeat;
/*背景图片移动坐标*/
background-position: -62px -83px;
}
</style>
</head>
<body>
<div class="img"></div>
</body>
</html>
总结：
1、必须要写height和width，否则看不到图片
2、先是图片地址：background-image: url("4.jpeg");
3、由于默认是平铺重复，则不需要重复时需要设置：background-repeat: no-repeat;
4、由于要实现在页面固定位置，展示图片的某个局部，则需要我们挪动图片直至背景图的局部在设置好的位置展示出来(背景图位置)：background-position: -62px -83px;
网友评论