HTML连载35-背景图片的练习、精灵图
2024-09-01 04:08:07
一、背景图片练习
解释:这个例子需要注意的是,我们背景图片嵌套到另一个图片之中。我们设计的注意点在于,怎么定位到我们想定位到的地方。
总结:背景图片就是一块一块的,我们想把块的位置定位好(一般就是宽和高的相等),然后再对图片在“块”中进行位置调整就可以了
<!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>
二、精灵图
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大数据学习视频礼包
最新文章
- C#4语法
- iOS修改TextField占位符颜色大小
- 有利于SEO的DIV+CSS的命名规则
- TFS 服务端默认端口更改
- Java2_J2EE体系架构
- 解决php中echo出来的汉子乱码
- node.js乱码问题【WebStorm环境】
- robotframework笔记16
- 【LeetCode OJ】Best Time to Buy and Sell Stock III
- Linux查看程序端口占用情况(转载)
- JavaService应用中的注意事项
- Android里的多线程知识点
- 乐观锁--CAS
- ss 如何解决margin-top使父元素margin失效
- LeetCode 341. Flatten Nested List Iterator
- VC一些经验系列: 《分享泄漏检测工具:内存、DC、GDI、Handle... 》
- WPS怎样设置多级标题(如四级标题)
- RMAN增量备份-备份保留策略-设置备份集属性
- shiro教程2(自定义Realm)
- UWP 响应键盘组合快捷键