本文介绍了web前端中关于背景图片的练习和精灵图的应用。背景图片练习强调了如何通过定位实现所需效果。而精灵图作为一种图像合成技术，能够减少HTTP请求，降低服务器压力。文章详细讲解了CSS精灵图的概念和作用，并提到实际操作将使用Dreamweaver进行演示，但由于条件限制，这部分内容暂未展示。
一、背景图片练习
解释：这个例子需要注意的是，我们背景图片嵌套到另一个图片之中。我们设计的注意点在于，怎么定位到我们想定位到的地方。
总结：背景图片就是一块一块的，我们想把块的位置定位好（一般就是宽和高的相等），然后再对图片在“块”中进行位置调整就可以了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>d101_background_image_exercise</title>
<style>
.box1{
width: 1600px;
height: 900px;
background-image: url("image/scratch_fish.jpg");
background-position: center center;
}
.box2{
width: 1600px;
height: 500px;
background-image: url("image/buyudaren.jpg");
background-position: center center;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
最低0.47元/天 解锁文章
扫一扫
267
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
