11_渐变色.html 973 B

123456789101112131415161718192021222324252627282930313233
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. <style>
  8. .box{
  9. width: 400px;
  10. height: 400px;
  11. background-image: url("./img/img1.jpg");
  12. background-size: 100% 100%;
  13. position: relative;
  14. }
  15. .box1{
  16. position: absolute;
  17. width: 400px;
  18. height: 200px;
  19. /* background-image: linear-gradient(rgba(255,0,0,0),rgba(255,0,0,.9)); */
  20. /* linear-gradient 线性渐变 默认从上到下渐变 也可以改变方向 to top, to left ,to right 也可以写角度 */
  21. background-image: linear-gradient(30deg,rgba(255,0,0,0),rgba(255,0,0,.9));
  22. bottom: 0;
  23. left: 0;
  24. }
  25. </style>
  26. </head>
  27. <body>
  28. <div class="box">
  29. <div class="box1"></div>
  30. </div>
  31. </body>
  32. </html>