HTML连载35-背景图片的练习、精灵图

最新推荐文章于 2022-07-25 23:19:39 发布

睿里睿气

最新推荐文章于 2022-07-25 23:19:39 发布

阅读量338

点赞数

分类专栏： HTML 文章标签： HTML

本文链接：https://blog.csdn.net/weixin_44630050/article/details/100588529

版权

HTML 专栏收录该内容

86 篇文章 2 订阅

订阅专栏

一、背景图片练习
解释：这个例子需要注意的是，我们背景图片嵌套到另一个图片之中。我们设计的注意点在于，怎么定位到我们想定位到的地方。
总结：背景图片就是一块一块的，我们想把块的位置定位好（一般就是宽和高的相等），然后再对图片在“块”中进行位置调整就可以了

<!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>

35.1
二、精灵图
1.什么是CSS精灵图
CSS精灵图是一种图像合成技术
2.CSS精灵图的作用
可以减少请求的次数，以及降低服务器的压力
3.如何使用CSS精灵图
CSS精灵图需要配合背景图片精确定位
要使用到dreamware正在安装，下次更新再进行演示
三、源码：
d101_background_image_exercise.html
地址:
https://github.com/ruigege66/HTML_learning/blob/master/d101_background_image_exercise.html
2.CSDN：https://blog.csdn.net/weixin_44630050（心悦君兮君不知-睿）
3.博客园：https://www.cnblogs.com/ruigege0000/
4.欢迎关注微信公众号：傅里叶变换，后台回复“礼包”获取Java大数据学习视频礼包

35.2

睿里睿气

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML连载35-背景图片的练习、精灵图

一、背景图片练习解释：这个例子需要注意的是，我们背景图片嵌套到另一个图片之中。我们设计的注意点在于，怎么定位到我们想定位到的地方。总结：背景图片就是一块一块的，我们想把块的位置定位好（一般就是宽和高的相等），然后再对图片在“块”中进行位置调整就可以了<!DOCTYPE html><html lang="en"><head> <meta c...
复制链接

扫一扫