【css】字体比背景图片更加亮和发光图层偏移效果

最新推荐文章于 2023-04-01 15:29:41 发布

KatyLight

最新推荐文章于 2023-04-01 15:29:41 发布

阅读量138

点赞数

分类专栏：样式静态页demo 文章标签： css 前端 html

本文链接：https://blog.csdn.net/qq_33014695/article/details/126117707

版权

样式同时被 2 个专栏收录

32 篇文章 0 订阅

订阅专栏

静态页demo

16 篇文章 0 订阅

订阅专栏

此刻文字有点像滤镜，效果html：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    body{
      /*background-image:linear-gradient(#800a49, #006080);*/
      background-image:linear-gradient(#33041d, #002633);

      background-size: 100% 100%;
      background-repeat: no-repeat;
height: 100vh;
      width: 100vw;

    }
    h1{
      color:#fff;
      text-transform: uppercase;
      position: absolute;
      top:50%;
      transform: translateY(-50%);
      margin:0;
      padding:0;
      font-size:10em;
      text-align: center;
      text-shadow: 0  5px 20px rgba(0,0,0,1);
      mix-blend-mode: overlay;
      -webkit-box-reflect: below 1px linear-gradient(transparent,#00000055);

    }


    .fashion{
      color: #ffffff99;
      font-size:50px;
      font-weight: 900;
      -webkit-box-reflect: below 1px linear-gradient(transparent,#00000055);

      /*text-transform: uppercase;*/
      position: absolute;

      /*text-shadow: 0px 5px 20px rgba(0,0,0,1);*/

      /*text-shadow: 5px 5px 0 #00FFFF99;*/
      mix-blend-mode: lighten;
      /*mix-blend-mode: overlay;*/

    }
  </style>
</head>
<body>
<h1>Natalie horler</h1>
<div class="fashion" style=" left:5px;top: 100px;color: #FF00FF;">fashion</div>
<div class="fashion" style=" left: 0;top: 95px;color: #00FFFF;">fashion</div>
</body>
</html>

mix-blend-mode: overlay;是关键