HTML连载80-多重背景图片及其练习
2020-04-05 16:00:28来源:博客园 阅读 ()
一、多重背景图片
1.background:url() 重复类型 位置信息,url() 重复类型 位置信息;
中间使用英文逗号隔开
2.第二种方法就是分开写
background-image:url(),url();
background-repeat:重复类型,重复类型;
background-positon:位置信息,?位置信息;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>D192_MoreBackgroundImage</title> <style> *{ padding:0; margin:0; } div{ width: 1000px; height: 1000px; border:1px solid black; margin:0 auto; background:url("image/play_tennis.jpg") no-repeat left top, url("image/baidu_logo.png") no-repeat right top; /*注意点:多张背景图片之间使用逗号隔开,先添加的背景图片会盖住后添加的背景图片*/ /*另外一种方法*/ background-image: url("image/play_tennis2.jpg"),url("image/baidu_logo.png"); background-repeat: no-repeat,no-repeat; background-position: left bottom,right bottom; } </style> </head> <body> <div></div> </body> </html>
二、练习
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>D193_ExerciseOfMoreImage</title> <style> *{ padding:0; margin:0; } div{ width: 700px; height: 450px; border:1px solid black; margin:100px auto; background-image: url("image/sun.png"),url("image/blueSky.png"); /*background-size:*/ background-repeat: no-repeat ,no-repeat; background-position: 20px 20px,0 0; animation:move 2s linear 0s infinite normal; } @keyframes move { from{ background-position: 20px 80px,0 0; } to{ background-position: 80px 20px,-200px 0; } ? } </style> </head> <body> <div></div> </body> </html>
?
三、源码:
D192_MoreBackgroundImage.html
D193_ExerciseOfMoreImage.html
地址:l
https://github.com/ruigege66/HTML_learning/blob/master/D192_MoreBackgroundImage.html
https://github.com/ruigege66/HTML_learning/blob/master/D193_ExerciseOfMoreImage.html
2.CSDN:https://blog.csdn.net/weixin_44630050
3.博客园:https://www.cnblogs.com/ruigege0000/
4.欢迎关注微信公众号:傅里叶变换,个人账号,仅用于技术交流,后台回复“礼包”获取Java大数据学习视频礼包
原文链接:https://www.cnblogs.com/ruigege0000/p/12635460.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
下一篇:建立个人博客配置推荐
- DIV居中的经典方法 2020-06-13
- Html/css 列表项 区分列表首尾 2020-06-11
- HTML骨架 2020-06-10
- HTML基础教程_1 2020-06-09
- HTML基础02 2020-06-09
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash