css背景图片的练习、精灵图

最新推荐文章于 2023-09-04 19:26:08 发布

web世界之窗

最新推荐文章于 2023-09-04 19:26:08 发布

阅读量712

点赞数

CC 4.0 BY-SA版权

文章标签： css 前端 Web前端前端开发网页制作

本文链接：https://blog.youkuaiyun.com/weixin_45974707/article/details/103616895

本文介绍了CSS背景图片的定位练习，强调了在设计时确保宽高相等并调整图片在块中的位置。此外，文章探讨了CSS精灵图的基本概念，指出它能减少请求次数、减轻服务器压力，并简单说明了如何结合背景图片进行精确定位，但具体Dreamweaver的使用方法将在后续更新中展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、背景图片练习

解释：这个例子需要注意的是，我们背景图片嵌套到另一个图片之中。我们设计的注意点在于，怎么定位到我们想定位到的地方。

总结：背景图片就是一块一块的，我们想把块的位置定位好（一般就是宽和高的相等），然后再对图片在“块”中进行位置调整就可以了

<!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>
学习Q-q-u-n： 731771211，分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）