设置高斯模糊背景

最新推荐文章于 2022-04-28 13:39:26 发布
最新推荐文章于 2022-04-28 13:39:26 发布
阅读量319 收藏
点赞数
分类专栏： 技术 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Angler_/article/details/108701800
版权

1.在html设置一个用来存放背景的div和一个蒙版div

2.css设置（filter是设置模糊度的，值越大模糊程度越大）（设置一下min-height和min-width，保证浏览器窗口缩小时布局不会乱）

斯空拂
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android设置高斯模糊
01-03
分享自己写的一个高斯模糊的工具类，可以根据Bitmap,Imageviw,Drawable或者资源文件设置 public class BlurImageView { /** 水平方向模糊度 */ public static float HRADIUS = 5; /** 竖直方向模糊度 */ public...
背景色高斯模糊的使用、filter:blur()、以及消除周围模糊和白边的问题、backdrop-filter使用
weixin_45803990的博客
08-17 797
还有高级的是背景色的高斯模糊。这个比较麻烦点。改天来记录下。
CSS3高斯模糊特效
FlyJapan_viba的博客
09-02 3945
参考网页： https://www.cnblogs.com/oxspirt/p/6251238.html CSS实现遮罩层透明文字不透明 https://blog.csdn.net/csu_passer/article/details/78406702 CSS3实现模糊背景的三种效果 https://www.cnblogs.com/zhaofeis/p/5938554.html CSS i...
html 背景高斯模糊,css实现背景模糊，但不影响背景上的内容
weixin_39608301的博客
06-05 2140
当我们插入背景图片时，又不影响内容的表达，我们可以让背景图片模糊。下面介绍一下我所用到的方法。需要把背景图片和内容分别放在两个div里面方便我们管理，再对背景图片进行高斯模糊(filter属性)。下面看一下代码设置：html代码：高斯模糊背景今天是植树节，你植树了吗？css代码：.bg{background-image:url(2.jpg);width:100%;height:750px;line...
css背景图片高斯模糊_css3实现背景模糊的三种方式(小结)
weixin_34900758的博客
03-03 3041
一、普通背景模糊代码：html,body {width: 100%;height: 100%;}* {margin: 0;padding: 0;}/*背景模糊*/.bg {width: 100%;height: 100%;position: relative;background: url("./bg.jpg") no-repeat fixed;background-size: cover;box...
Android使用高斯模糊实现模糊背景
qq_42948831的博客
04-01 9227
Android使用高斯模糊实现模糊背景 引言 最近的开发中实现了一个模糊背景的效果。大概效果是这样的： 实现思路 将View转成Bitmap，并且记录列表的滑动距离，生成bitmap时上移画布（这样是为了实现滑到那，模糊那的效果） 上移画布：一般绘制View，canvas的起始点在屏幕的左上角，也就是(0,0)。当canvas上移距离y后，绘制的起点会变成(0,-y)。这样canvas竖直方向-y到0这一部分会在屏幕外，那么在绘制的时候view的top到top+y是在屏幕外面，我们看不到；我们能看到的
iOS实现背景高斯模糊效果
08-31
主要介绍了iOS实现背景高斯模糊效果，代码简单易懂，非常不错，需要的朋友参考下吧
Android高仿IOS动态高斯模糊背景
01-03
Android高仿IOS动态高斯模糊背景，如图演示，效率很高，无卡顿，测试机红米2
小程序实现全屏幕高斯模糊背景图
03-29
通过上面两张图可以看出来，我们既可以用网络图片来实现高斯模糊，有可以用本地图片来实现。 一，先来用本地图片做全屏背景 1，先在wxml文件里引入本地图片 (此图片来源于网络，如有侵权，请联系删除! ) 2，然后设置...
css背景图片高斯模糊_CSS设置背景模糊的实现方法
weixin_39968592的博客
12-20 4132
在做一些页面的时候，为了让页面更好看，我们常常需要设置一些背景图片，但是，当背景图片太过花哨的时候，又会影响我们的主体内容，所以我们就需要用到 filter 属性来设置他的模糊值。html代码如下JS Bin我是需要突出显示的内容但是如果直接在背景图片上使用的话，.cover{width:600px;height:300px;position:relative;text-align:center;...
CSS实现背景模糊效果（高斯模糊）
Think____的博客
07-31 1万+
px值越大，越模糊，可以按照不同的类名给不同的模糊值，背景看起来会更好看一点 重点实现为： -webkit-filter: blur(10px); /* Chrome, Opera */ -moz-filter: blur(10px); -ms-filter: blur(10px); filter: blur(10px); 转自：h...
CSS实现背景图片高斯模糊效果
apple_54470279的博客
04-28 6776
高斯模糊亦称为毛玻璃效果，这里提供一种可行的背景图片高斯模糊效果的解决方案，适用于大部分情况。其原理是通过 ::before 伪元素制作一个遮罩层的效果。
CSS实现图片，背景高斯模糊
qq_35821283的博客
12-03 1446
<!DOCTYPE html> <html> <head>     <title>Blur</title>     <style type="text/css">     html,     body {         width: 100%;         height: 100%;         margin:
css实现背景色高斯模糊
苏苏就是小苏苏的博客
02-15 2167
1.实现效果 2.实现原理 1.filter：blur() 2.伪元素设置，不影响子元素显示 3.实现代码 <view class="award a">苏苏小苏苏</view> <view class="award ">苏苏小苏苏</view> /* pages/another/filterBlur/index.wxss */ page { background: #ffbb5e; margin-top: 50px; } .award { w
css背景图片高斯模糊_CSS背景
cunfen6312的博客
07-28 2064
css背景图片高斯模糊 CSS背景 (CSS Backgrounds) Well, you have now seen the syntax of CSS and are now comfortable with writing CSS rules using class and id selectors. Moving on, we now dive into backgrounds in C...
简单css实现高斯模糊（毛玻璃效果）
dream12331的博客
09-06 6656
img标签添加class  设置filter:blur (0-npx)模糊半径 filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */         -webkit-filter: blur(40px); /* Chrome, Opera */            -moz-filter: blur(40px);           ...
css实现背景模糊，但不影响背景上的内容
M_DREAMER的博客
03-12 1万+
        当我们插入背景图片时，又不影响内容的表达，我们可以让背景图片模糊。        下面介绍一下我所用到的方法。需要把背景图片和内容分别放在两个div里面方便我们管理，再对背景图片进行高斯模糊（filter属性）。下面看一下代码设置：html代码：&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;met...
CSS3实现模糊背景的三种效果
热门推荐
CSU_Zipple的博客
10-31 13万+
不开头了，直接进入主题。 普通背景模糊效果如下： 使用属性：filter:(2px)普通背景模糊为了美观不能使背景前的文字模糊，而filter属性会使这整个div的后代并且还会出现白边。也就是说无法达到这个效果。怎么办呢？我们可以使用伪元素，这样我们也顺便解决了白边的问题。实现思路： 在父容器中设置背景，并且使用相对定位，方便伪元素重叠。而在:after中只需要继承背景，并且设置模糊，绝对定位
css 设置背景图片模糊，内容不模糊
oHeHeHou的专栏
07-21 12万+
需求：一个div设置了background: url，现在需要使图片背景模糊，div内的文字清晰显示。原始代码：<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <style type="text/css"> .content { color: #ffffff;
i 下拉状态栏背景增加高斯模糊背景
最新发布
12-10
i 下拉状态栏的背景增加高斯模糊背景可以通过以下步骤实现。首先，我们需要在状态栏的代码中添加一个高斯模糊效果的背景。这可以通过在对应的xml文件或者java代码中设置状态栏的背景来实现。其次，我们需要选择合适...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值