首页 > 其他分享 >css设置背景模糊周边有白色光晕,如何解决?

css设置背景模糊周边有白色光晕,如何解决?

时间:2024-03-20 15:55:05浏览次数:39  
标签:img 100% 模糊 光晕 filter backdrop background position css

<div class="img-box">
        <img :src="xxx.png">
             <div class="img-bg" :style="{'background-image': `url(`+ xxx.png+ `)`}"></div>
</div>
.img-box {
    width: 100%;
    height: 212px;
    text-align: center;
    position: relative;
    img {
      width: 100%;
      height: 100%;
      position: relative;
      z-index: 5;
    }
    .img-bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-size: 200%; /* 放大两倍 */
      background-position: center;
      background-repeat: no-repeat;
      filter: blur(20px); /* 添加20模糊效果 */
      overflow: hidden;
    }
    .img-bg::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.6); /* 60%不透明度的黑色 */
      z-index: 1; /* 确保蒙层在背景之上 */
    }
  }

需求:想要给一个展示图片的区域底部加一个该图片的放大后的背景,并模糊 20,并增加一个黑色 0.6 透明度的遮罩

但是按照上面代码实现后,周边有一圈白色光晕,如图:

 

解决方案:

使用  backdrop-filter: blur(20px);  

但是注意,backdrop-filter 不能直接加在背景图本身样式上,会导致不生效。

  • backdrop-filter 属性需要在具有定位的元素上使用,例如 position: relativeposition: absolute;
  • backdrop-filter 应用于的元素需要有一个背景元素在其后,通常是该元素的父级元素。如果没有这样的背景元素,backdrop-filter 将不会生效。确保父级元素有可见的背景内容。

所以我们将 backdrop-filter  放在  img-bg::before 里,即可生效:

.img-bg::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.6); /* 60%不透明度的黑色 */
      z-index: 1; /* 确保蒙层在背景之上 */
      backdrop-filter: blur(20px); /* 添加20模糊效果 */
    }

这样就白色光晕的效果了。

标签:img,100%,模糊,光晕,filter,backdrop,background,position,css
From: https://www.cnblogs.com/beileixinqing/p/18085425

相关文章

  • css 元素显示模式
    block(块级元素):页面中独占一行,宽度撑满父元素,高度由内容展开,可以由css设置宽高。(如div)inline(内联元素):一行中排不下的元素会在下一行从左到右排列,宽度和高度由内容决定,无法由css设置宽高。(如span、sub、a、label、br)inline-block(行内块元素):一行中排不下的元素会在下一行从左到右排......
  • css如何通过媒体查询功能实现界面的自适应
    CSS中的媒体查询功能允许您根据不同的设备或屏幕尺寸应用特定的样式规则,从而实现界面的自适应。下面是一个简单的示例,展示如何使用媒体查询来实现自适应布局:htmlCopy code<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name=......
  • 19.html+css网页设计实例/“美妆”口红主题介绍/web前端期末大作业/
    前言本文以“美妆”口红网页为主题设计,本实例系统文件种类包含:html结构文件、css网页样式文件。应用DIV、点击事件、表格、搜索等,供大家参考。【关注作者|获取更多源码(2000+个Web案例源码)|优质文章】;您的支持是我创作的动力!看到这里就【点赞收藏博文】,三连支持下吧,3Q!有兴趣的......
  • postcss-px2rem 的使用
    两种方法:1、不改变第三方组件的样式第一步先卸载安装的postcss-px2remnpmuninstallpostcss-px2rem安装postcss-px2rem-excludenpmipostcss-px2rem-exclude--save第二步在项目根目录下面建立postcss.config.js文件 module.exports={plugins:{......
  • 登录模块 除了css部分
    登录表单验证,正则判断账号密码输入没问题点击登录或者输入手机号发验证码,验证码要做倒计时验证码倒计时letphoneTimer=null;//倒计时constsendCode=()=>{lettimer=10;captcha.value=`重新发送10秒`;clearInterval(phoneTimer);phoneTimer=......
  • 前端基础之CSS基本属性
    一、长度和宽度行内标签无法设置长宽,就算你写了,也不会生效<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>p{background-color:red;height:......
  • CSS小练习
    使用CSS搭建网站文章首页blog.css/*通用样式*/body{/*去除自带的8px*/margin:0;background-color:#eeeeee;}a{/*去除a标签下的下划线*/text-decoration:none;}ul{/*list-style-type:去除ul标签对应的黑色圆点*/list-styl......
  • 前端基础之CSS浮动和定位方式
    一、浮动(1)概述浮动是所有网站页面布局必备的可以将块儿级标签浮动起来脱离正常的文档流。浮动是多个块儿级标签可以在一行显示(全部飘在了空中)浮动的元素,没有块儿级一说,本身有多大浮起来之后也就只能占多大。只要涉及到页面的布局,一般都是用浮动提前规划好主要属性值为:l......
  • 前端基础之CSS基础
    一、什么是cssCSS(CascadingStyleSheets的缩写),翻译为“层叠样式表”或者“级联样式表”,简称样式表。主要用来给HTML网页设置外观或者样式(HTML网页中的文字大小、颜色、字体、网页的背景颜色、背景图片等)。通俗来说就是给HTML标签添加样式的,让它变得更加好看二、注释语法......
  • 前端基础之CSS选择器
    一、什么是选择器选择器是指通过一定的语法规则选取到对应的HTML标记,然后给这个对应的HTML标记设置样式二、选择器的分类CSS中提供了多种不同类型的选择器,例如基本选择器、组合选择器、伪类选择器、伪元素选择器等等。1、基本选择器(1)概览在CSS中,选择器用于选取HTML文档中的......