背景图像应用及渐变

背景

背景颜色

背景图片

 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>
渐变

 

posted @ 2022-03-28 19:32  doremi429  阅读(17)  评论(0)  编辑  收藏  举报