内容简介:文章目录有时候我们会对页面的背景或者某个图片使用
- Home
- Programming >Front end >CSS
- 去掉模糊背景或图片的白边
文章目录
前言
有时候我们会对页面的背景或者某个图片使用 blur
属性来达到模糊的毛玻璃效果,这样会让我们的内容更突出,不会被背景图片而干扰。但是使用模糊背景的一个问题是,在模糊的图片边缘,由于模糊效果会让底层的颜色露出来,比如我们对我们页面的背景进行模糊的时候会把 body
的背景色透出来,一般我们的 body
是白色的,所以会有一圈模糊的白边,下面来分享几种解决问题的方法。
查看代码点击页面
小图片
铺满全屏的背景和页面上的小图片的处理方法的不同的,对于页面上的小图片我们只需要给它的包含元素添加一个 overflow: hidden
就可以。
<style> html, body { height: 100%; width: 100%; margin: 0; padding: 0; } .wrap { height: 300px; width: 450px; margin: 20px auto; } .wrap.s2 { overflow: hidden; } .wrap img { height: 300px; width: 450px; filter: blur(5px); } </style> <div class="wrap s1"><img src="https://img.clloz.com/blog/writing/totoro.jpg" alt=""></div> <div class="wrap s2"><img src="https://img.clloz.com/blog/writing/totoro.jpg" alt=""></div>
我们可以明显的看出第一个图片的边缘也是模糊效果, body
的白色透出,而第二张图片虽然也是模糊的,但是边缘却很清晰。
查看代码点击页面
全屏背景处理
处理小图片的方式非常简单,但是这个方法在页面背景上却不生效,至于为什么我也不太清楚,不过我尝试了多次,只使用 overflow: hidden
并不能让页面的背景边缘变清晰。
只能另辟蹊径了,大家的解决方法虽然代码有所不同,不过手段都差不多,都是通过扩大背景所在元素的大小来实现的,也就是说把模糊的那部分移动到可视范围之外,具体有如下几种做法。
transform: scale()
扩大
既然要改变大小,自然会想到 transform
属性,使用这个属性需要注意的是,扩大的比例。如果你的图片不需要考虑细节,那么你可以把比例调大一点。如果图片细节比较重要,那么就要选择适当的比例,还要考虑在不同大小的屏幕上的效果。
<style> * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; width: 100%; } .cover { height: 100%; width: 100%; background: url("https://img.clloz.com/blog/writing/totoro.jpg"); background-size: cover; filter: blur(5px) brightness(0.5); transform: scale(1.02) } </style> <div class="cover"></div>
查看代码点击页面
绝对定位
不设置背景所在元素的大小,用绝对定位的定位属性来设置图片的大小也可以达到效果。
<style> * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; width: 100%; } .cover { position: absolute; top: -8px; right: -8px; bottom: -8px; left: -8px; background: url("https://img.clloz.com/blog/writing/totoro.jpg"); background-size: cover; filter: blur(5px) brightness(0.5); } </style> <div class="cover"></div>
查看代码点击页面
总结
可能还有其他更好的方法,这几个方法都需要设置 body
的 overflow
为 hideen
,不过这也不算什么问题,需要滚动的话再包一层就可以了。如果你有更好的办法欢迎回复。
参考文章
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- css去掉table的td单元格的间距cellspacing,设置隔行显示不同背景颜色
- 去掉烦人的 !=null
- GTK+ 项目名终于去掉了那个加号
- ABP Web开发入门-去掉多语言菜单项
- 据传苹果的新款平价 iPad 会去掉 Face ID
- awk中符点型小数去掉小数点转换成整数的方法
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。