css 设置背景图片模糊效果

最新推荐文章于 2025-03-11 17:11:17 发布

wcy7916

最新推荐文章于 2025-03-11 17:11:17 发布

阅读量2.3w

点赞数 4

分类专栏： CSS

本文链接：https://blog.youkuaiyun.com/wcy7916/article/details/81076034

版权

CSS 专栏收录该内容

21 篇文章

订阅专栏

本文介绍了一种使用HTML和CSS实现的网页头部模糊背景效果。通过绝对定位将背景图片放置于头部区域，并应用模糊滤镜及透明度调整，营造出现代化的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果：

这里写图片描述
html:

 <div class="head_channel">
      <div class="head_box">
          //这里是内容区域
      </div>
      <div class="blur_bj">
        <img src="https://static.esdict.cn/MediaPool/ChannelImg/2ceda489-5911-49ec-9e3d-ed322112ccb2.jpg?stamp=1515058531000" alt="Alternate Text">
      </div>
      <div class="blur_bj_gray"></div>

 </div>

css:

    .head_channel {
        height: 3rem;
        position: relative;
        overflow: hidden;
    }
     .head_channel .blur_bj {
        position: absolute;
        height: 100%;
        width: 100%;
        top: 0;
        z-index: -1;
        -webkit-filter: blur(5px);
        filter: blur(15px);
        transform: scale(1.2);
    }
        .head_channel .blur_bj img {
            width: 100%;
            height: 120%;
        }
        .head_channel .blur_bj_gray {
            position: absolute;
            height: 100%;
            width: 100%;
            top: 0;
            background: rgba(0,0,0,.2);
            z-index: -1;
            opacity: 0.5;
        }