一、多重背景圖片 1.background:url() 重覆類型 位置信息,url() 重覆類型 位置信息； 中間使用英文逗號隔開 2.第二種方法就是分開寫 background-image:url(),url(); background-repeat:重覆類型,重覆類型； background-p ...
一、多重背景圖片
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大數據學習視頻禮包
