html5图片高斯模糊,CSS实现图片高斯模糊但边界清楚的效果

在CSS中，我们可以使用滤镜(filter)为图片添加模糊特效。但是这种处理会造成图片边界也变得模糊，那么CSS实现图片高斯模糊但边界清楚的效果怎么写呢？

有些时候，我们可能需要图片模糊但是边界清楚的效果，这时候可以考虑一种思路：在图片外面加一个框防止显示内容溢出，在框内将图片居中，模糊并适当放大，让模糊的白边刚好在显示范围外面，下面是实现方法：

CSS高斯模糊

/* 初始化 */

html,body {

margin: 0;

padding: 0;

height: 100%;

}

/* 图片外框 */

.box {

position: relative;

width: 800px;

height: 600px;

display: flex;

justify-content: center;

align-items: center; /* 使用flex将图片水平垂直居中 */

overflow: hidden; /* 溢出部分隐藏 */

}

/* 图片层 */

.image {

position: absolute;

width: 115%;

height: 115%;

background-image: url(example.jpg);

background-size: 100%;

background-position: center;

background-repeat: no-repeat;

filter: blur(20px); /* 模糊效果，与宽高搭配做适当调整，把白边推出边界隐藏掉 */

}

html5图片高斯模糊,CSS实现图片高斯模糊但边界清楚的效果相关推荐

html 画廊代码,HTML5实践-使用css装饰图片画廊的代码分享（二）
在上一讲中,我们的解决方案使用到了jquery去创建一个span标签.在这一讲中我们将用一种更好的解决方式,使用:before 和 :after 伪类.:before经常会用到,他可以用来添加额外的元 ...
html 图片布局,CSS 布局图片
通过CSS 布局图片圆角图片 .img1 { border-radius: 8px; } .img2 { border-radius: 50%; } 缩略图 img { border: 1px so ...
html css 如何将图片作为背景,CSS背景图片和HTML中的img标签
背景图片: 该图片是218*170 css内容: div{ width: 100px; height: 100px; background: url(img/1.jpg); border: 2px s ...
html图片向上,CSS实现图片向上浮动
CSS实现图片向上浮动办法今天在写CSS时需要实现:当鼠标悬停在由图片和介绍组成的超链接时,榴莲向上浮动的效果. 我在实现这个效果时思路分为以下几步: 鼠标悬停图片移动下方元素绝对定位增加过渡 ...
html图片折叠,CSS 实现图片鼠标悬停折叠效果
CSS 实现图片鼠标悬停折叠效果 1. 实现要点折叠是由多个块级元素来完成的; 图片是以背景图片的方式呈现出来的; 给每个块级元素设置同一张背景图片,通过background-position来控 ...
css禁止图片保存,CSS的图片保存后面目全非？教你快速解决
什么叫"CSS中的图片"? 简单的说就是镶在CSS样式表中的图片.当我们用浏览器的"另存为"功能保存网页时,由于很多写在CSS样式表里面的图片都下载不到,所以会 ...
html中两个图片叠放,CSS实现图片叠放（勾选图标）
场景我们经常会遇到这种场景,有一个待选图片列表,在图片上(可能是右上角也有可能时右下角)叠放一个勾选状态图标,这篇文章就记录实现这个功能的过程. 原理利用flex布局space-around显示图 ...
html5 coverflow,使用CSS+JS帮你实现苹果cover flow效果
原标题:使用CSS+JS帮你实现苹果cover flow效果 coverflow-demo222 <> ;(function(parent){ var cards = parent.que ...
html怎么帮图片占位,html图片和css背景图片哪个先开始加载？css占位图怎么操作？...
如果你的网站是个图片站,首页显示了很多图片.那么你就会有图片多了导致加载比较慢的困扰.这个时候有几个方案解决. 1.物理解决方案:加大网站的带宽+压缩图片大小: 2.用图片懒加载js,图片没加载出来之 ...
html中图片放css还是,图片到底是写在html还是写在css呢
[原文请进入] 之前讲了些年青人在大学里和刚踏入社会时应该持有怎样的学习态度和掌握什么样的学习方法,以及怎么去面对自己的职业选择.随着炎热七月的到来,相信有很大部分... 到底是补铁还是铁过量作者 ...

html5图片高斯模糊,CSS实现图片高斯模糊但边界清楚的效果

html5图片高斯模糊,CSS实现图片高斯模糊但边界清楚的效果相关推荐

最新文章

热门文章