背景影象應用及漸變
阿新 • • 發佈：2022-03-28
背景
背景顏色
背景圖片
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 7 <style> 8 div{ 9 width: 1980px; 10 height: 1080px; 11 border: 1px solid red; 12 background-image背景圖片: url("../static/imgs/1.jpg"); 13 /*預設全部平鋪repeat*/ 14 } 15 .div1{ 16 background-repeat: repeat-x; 17 } 18 .div2{ 19 background-repeat: repeat-y; 20 } 21 .div3{ 22 background-repeat: no-repeat; 23 } 24 </style> 25 26 </head> 27 <body> 28 <div class="div1"></div> 29 <div class="div2"></div> 30 <div class="div3"></div> 31 32 </body> 33 </html>
漸變：Grabient
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta漸變charset="UTF-8"> 5 <title>Title</title> 6 <!-- 徑向漸變，圓形漸變--> 7 8 <style> 9 body{ 10 /*background-color: #0093E9;*/ 11 /*background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);*/ 12 background: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%); 13 14 } 15 16 </style> 17 </head> 18 <body> 19 20 </body> 21 </html>