css3中常用的背景，渐变，遮罩总结

最新推荐文章于 2024-01-16 13:37:50 发布

yy_33404590

最新推荐文章于 2024-01-16 13:37:50 发布

阅读量566

点赞数

分类专栏：前端学习文章标签： css3 css html

本文链接：https://blog.csdn.net/qq_33404590/article/details/128016295

版权

前端学习专栏收录该内容

32 篇文章 1 订阅

订阅专栏

前言：最近开发中遇到css3中的背景颜色切换效果，复习总结一下

1. 使用background-postion 渐变切换背景

   <style>
     body {
       margin: 0;
       padding: 0;
       font-family: "montserrat";
       background-image: linear-gradient(to right,
         #3498db,
         #27ae60,
         #9b59b6,
         #3498db,
         #f39c12,
         #d35400
       );
       background-size: 800%;
       animation: bganimation 105s infinite;
     }
     .text {
       color: white;
       text-align: center;
       text-transform: uppercase;
       margin: 350px 0;
       font-size: 22px;
     }

     /* 利用   background-position实现背景渐变效果*/
     @keyframes bganimation {
       0% {
         background-position: 0% 50%;
       }
       50% {
         background-position: 100% 50%;
       }
       100% {
         background-position: 0% 50%;
       }
     }
   </style>
 </head>
 <body>
   <div id="" class="text">Gradient Background Animation</div>
 </body>


2. 巧用 mix-blend-mode, 实现图片遮罩效果
   <style>
     * {
       padding: 0;
       margin: 0;
     }
     .banner {
       position: fixed;
       left: 0;
       top: 0;
       width: 100%;
       height: 100%;;
     }
     video {
       position: absolute;
       left: 0;
       top: 0;
       bottom: 0;
       right: 0;
       margin: auto;
       width: 1400px;
       height: 1400px;
       object-fit: cover;
     }
     .bg {
       position: absolute;
       left: 0;
       top: 0;
       bottom: 0;
       right: 0;
       margin: auto;
       width: 1400px;
       height: 1400px;
       background: #fff url(./love.svg) no-repeat;
       background-size: cover;
       /* 关键点---多层背景混合模式 */
       mix-blend-mode: screen;  

     }
   </style>
 </head>
 <body>
   <div class="banner">
     <video src="./boxing.mp4" autoplay muted loop></video>
     <div class="bg"></div>
   </div>
 </body>

3. 使用webkit-mask 实现遮罩
  <style>
     * {
       padding: 0;
       margin: 0;
     }
     .banner {
       display: flex;
       justify-content: center;
       align-items: center;
       width: 100%;
       height: 100vh;
     }

     .bg {
       width: 800px;
       height: 800px;
       /* 使用webkit-mask */
       -webkit-mask: url(./love.svg) no-repeat;    
       -webkit-mask-size: 800px auto;
       background: linear-gradient(45deg, red, #d351ac, red);
     }
   </style>
 </head>
 <body>
   <div class="banner">
     <div class="bg"></div>
   </div>
 </body>

最后关注下background: #fff url(…)等用法

// 径向渐变
  background: radial-gradient(  at 50% 50%, rgb(133, 149, 187) 4%,rgb(9, 43, 103) 60%);

// 线性渐变
  background: linear-gradient(
          to top,
          rgba(9, 43, 103, 1),
          rgba(9, 43, 103, 0.8) ,
          rgba(9, 43, 103, 0.5)
        );

// 模糊效果
  background-color: rgba(255, 255, 255, 0.01);
  backdrop-filter: blur(10x);
  -webkit-backdrop-filter: blur(3px);