欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-11-08 11:41:22
一、背景图片练习 解释:这个例子需要注意的是,我们背景图片嵌套到另一个图片之中。我们设计的注意点在于,怎么定位到我们想定位到的地方。 总结:背景图片就是一块一块的,我们想把块的位置定位好(一般就是宽和高的相等),然后再对图片在“块”中进行位置调整就可以了 二、精灵图 1.什么是CSS精灵图 CSS精 ......

一、背景图片练习

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

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

 

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

 

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

二、精灵图

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大数据学习视频礼包

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