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

最新推荐文章于 2024-04-10 21:30:47 发布

原创最新推荐文章于 2024-04-10 21:30:47 发布 · 727 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #Web前端 #前端开发 #网页制作

本文介绍了CSS背景图片的定位练习，强调了在设计时确保宽高相等并调整图片在块中的位置。此外，文章探讨了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>
学习Q-q-u-n： 731771211，分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）

二、精灵图

1.什么是CSS精灵图

CSS精灵图是一种图像合成技术

2.CSS精灵图的作用

可以减少请求的次数，以及降低服务器的压力

3.如何使用CSS精灵图

CSS精灵图需要配合背景图片精确定位

要使用到dreamware正在安装，下次更新再进行演示