最近做的一个项目需要用到背景图的模糊处理，在网上查资料，发现用css的 filter 属性就可以解决，但是因为模糊度比较高，四周会有很长的模糊边，百度上也没找到解决的方法，，可喜的是最后我在分析一个demo中发现了解决办法，真的是柳暗花明又一村，方法简单到被自己蠢哭，代码量很少的，而且解决方法是在太简单了，本来不想写下来的，但是转念，万一有和我一样进入死胡同出不来的糊涂虫呢。好了，不卖关子了，下面我将图片模糊且没有‘’模糊毛边‘’的代码贴出来供有需要的人参考

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style>
img{
width: 800px;
filter: blur(10px);
}
</style>
</head>
<body>
<div>
<img src="play2.jpg" alt="">

</div>

<p>11111111111111</p>
</body>
</html>

　　

大家可以看到 图片模糊之后，边缘线不明确，底部的模糊会盖住下面的文字或其他内容，那该怎么办呢

div{

    width: 800px;

    height: 382px;

    overflow: hidden;

}

是的，只需要给img的div固定宽高，最重的是加上overflow: hidden;  结果如下图

是不是清爽了许多

希望会帮助有需要的人

前端纯css 图片的模糊处理的更多相关文章

  1. 纯CSS图片缩放后显示详细信息

    哎~!突然好久没更新博客了,最近总在下雨,晚上也经常没有时间来管理博客(目前在敲自己的一个平台,晢时还在写逻辑层的代码),好吧!废话不多说了,言归正传. 现在很多图片缩放的特效大多数都是用javasc ...

  2. 偏前端-纯css,手写轮播-（焦点切换 和 自动轮播 只可选择一种，两者不可共存）

    现在我们一般都是在网上找个轮播插件,各种功能应有尽有,是吧!!~大家似乎已经生疏了手写是什么感觉.万一哪天想不起来,人家要手写,就尴尬了!~~跟我一起复习一下吧 不多说:效果图看一下: 高度不能是固定 ...

  3. 纯css 图片自适应居中

    html 结构 <div class="container"> <div class="content"></div> &l ...

  4. iHover – 30+ 纯 CSS 实现的超炫的图片悬停特效

    iHover 是一个令人印象深刻的图片悬停效果集合,完全基于 CSS3 实现,无依赖,能够搭配 Bootstrap 3 很好地工作.基于 SCSS 技术构建,便于修改变量.有模块化的代码,无需包含整个 ...

  5. CSS3实战开发: 纯CSS实现图片过滤分类显示特效

    原文:CSS3实战开发: 纯CSS实现图片过滤分类显示特效 各位网友大家好,今天我要带领大家开发一个纯CSS的图片分类显示的网址导航,单纯看标题大家可能有些困惑,依照以往惯例,我先给大家演示一下实际运 ...

  6. 利用CSS3 filter:drop-shadow实现纯CSS改变图片颜色

    体验更优排版请移步原文:http://blog.kwin.wang/programming/css3-filter-drop-shadow-change-color.html 之前做项目过程中有时候遇 ...

  7. 举重若轻流水行云，前端纯CSS3实现质感非凡的图片Logo鼠标悬停(hover)光泽一闪而过的光影特效

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_197 喜欢看电影的朋友肯定会注意到一个有趣的细节,就是电影出品方一定会在片头的Logo环节做一个小特效:暗影流动之间光泽一闪而过, ...

  8. 【web前端优化之图片模糊到清晰】看我QQ空间如何显示相片

    前言 此篇文章估计不会太长,有移除首页的风险,但是老夫(称老夫是因为我们真正的叶小钗其实都100多岁啦)是不会怕滴.所以,我来了哟! 题外话:今天我们一起还看了一道前端的面试题,而后我本来还想多找几道 ...

  9. 分享11个纯css完成的图片浏览器

    图片画廊用于在网站上显示系列图片,它已成为网站重要的组成部分.实现图片画廊有很多种方法,今天要与大家分享的是11个使用纯 CSS 实现的图片画廊,它们代码少,效果炫,加载速度快,希望能对大家有所帮助. ...

随机推荐

  1. 【后缀自动机】【拓扑排序】【动态规划】hihocoder1457 后缀自动机四·重复旋律7

    解题方法提示 小Hi:我们已经学习了后缀自动机,今天我们再来看这道有意思的题. 小Ho:好!这道题目让我们求的是若干的数字串所有不同子串的和. 小Hi:你能不能结合后缀自动机的性质来思考如何解决本题? ...

  2. python安装BeautifulSoup

    1.先下载pip https://pypi.python.org/pypi/pip 安装pip cd到路径 python setuo.py install 2.添加目录到环境变量中 xxx\Pytho ...

  3. （原创）Stanford Machine Learning (by Andrew NG) --- (week 9) Anomaly Detection&Recommender Systems

    这部分内容来源于Andrew NG老师讲解的 machine learning课程,包括异常检测算法以及推荐系统设计.异常检测是一个非监督学习算法,用于发现系统中的异常数据.推荐系统在生活中也是随处可 ...

  4. BUG:upstream timed out (10060: A connection attempt failed because the connected party did not properly respond after a period of time, or established connection failed because connected

    更换Apache扑向Nginx,刚搭建完WNMP,nginx能访问php页面 但是访问现有开发项目报错 [error] 4112#3724: *9 upstream timed out (10060: ...

  5. HDU 4655 Cut Pieces（2013多校6 1001题 简单数学题）

    Cut Pieces Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 131072/65536 K (Java/Others)Total ...

  6. [EF]使用EF简单增删改查

    目录 认识EF 添加数据 删除数据 修改数据 查询数据 总结 认识EF ADO.NET Entity Framework 是微软以ADO.NET为基础所发展出来的对象关系对伊(O/R Mapping) ...

  7. 开源轻量级即时通讯技术 MobileIMSDK 的常见问题解答

    本帖最后由 茜茜asa 于 2015-12-14 17:50 编辑 申明:MobileIMSDK 目前为个人原创开源工程且已发布,现整理了一些有关MobileIMSDK的常见的问题,希望对需要的人有用 ...

  8. redis_常用命令

    一.启动redis客户端 cmd   cd D:\Project\redis-2.8.17   redis-cli.exe     二.常用命令   参考文档:http://redisdoc.com/ ...

  9. 统计中的f检验和t检验的区别

    参考:http://emuch.net/html/201102/2841741.html 首先是目的不同.F检验用于比较两种分析方法是否存在显著差异(单边检验)或者两种方法紧密度是否存在差异(双边检验 ...

  10. 小程序把图片转换成base64

    1.首先需要到upng.js,然后upng.js需要pako.js,先一并下载了 2.然后就可以直接用了,具体代码如下: <!--pages/base/base.wxml--> <c ...