记录一个类似果冻\手机界面的css样式

最新推荐文章于 2024-10-06 17:22:52 发布

原创最新推荐文章于 2024-10-06 17:22:52 发布 · 258 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一种在div元素上叠加模糊背景图的技术，实现无缝视觉效果。通过使用伪元素和filter属性，背景图固定定位并进行模糊处理。针对IE浏览器不支持filter的问题，提供了白色半透明背景的兼容方案。

在这里插入图片描述

      <div :class="{'dialog-title':isEdge(),'dialog-title-compatible':true}" />
      <div class="dialog-title-content">诚邀加盟 免费考察</div>

总的来说实现原理就是先给一个白色半透明底色的div，在其之上利用伪元素::before叠加一小块稍微小一点的filter模糊处理的背景图，背景图全是是fixed定位，所以看起来就是无缝贴合的。

isEdge()是用来判断浏览器是否是IE，因为IE不支持filter，无解，如果是IE的话就不给伪元素添加背景图片，只剩下单纯的白色半透明。

.dialog-title-content{
    position: absolute;
    right: 16%;
    top: 200px;
    padding: 10px 0;
    width: 370px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: white;
    font-size: 32px;
    font-weight: 600;
    text-shadow: 3px 3px 5px rgba(15, 56, 76, 0.55);
    z-index: 3;
}
.dialog-title-compatible{
    position: absolute;
    right: 16%;
    top: 200px;
    padding: 10px 0;
    width: 370px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: white;
    font-size: 32px;
    font-weight: 600;
    background-color: rgba(255, 255, 255,0.4);
    text-shadow: 3px 3px 5px rgba(15, 56, 76, 0.55);
    box-shadow: 0px 0px 60px rgba(15, 56, 76, 0.55);
    overflow: hidden;
    border-radius: 20px;
}
.dialog-title-compatible::before{
    content: "";
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    z-index: 1;
}
.dialog-title::before{
    position: absolute;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    background-attachment: fixed;
    filter: blur(5px)
    background-image: url(../assets/Dashboard-background.png);
}