前端纯css 图片的模糊处理
最近做的一个项目需要用到背景图的模糊处理,在网上查资料,发现用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 图片的模糊处理的更多相关文章
- 纯CSS图片缩放后显示详细信息
哎~!突然好久没更新博客了,最近总在下雨,晚上也经常没有时间来管理博客(目前在敲自己的一个平台,晢时还在写逻辑层的代码),好吧!废话不多说了,言归正传. 现在很多图片缩放的特效大多数都是用javasc ...
- 偏前端-纯css,手写轮播-(焦点切换 和 自动轮播 只可选择一种,两者不可共存)
现在我们一般都是在网上找个轮播插件,各种功能应有尽有,是吧!!~大家似乎已经生疏了手写是什么感觉.万一哪天想不起来,人家要手写,就尴尬了!~~跟我一起复习一下吧 不多说:效果图看一下: 高度不能是固定 ...
- 纯css 图片自适应居中
html 结构 <div class="container"> <div class="content"></div> &l ...
- iHover – 30+ 纯 CSS 实现的超炫的图片悬停特效
iHover 是一个令人印象深刻的图片悬停效果集合,完全基于 CSS3 实现,无依赖,能够搭配 Bootstrap 3 很好地工作.基于 SCSS 技术构建,便于修改变量.有模块化的代码,无需包含整个 ...
- CSS3实战开发: 纯CSS实现图片过滤分类显示特效
原文:CSS3实战开发: 纯CSS实现图片过滤分类显示特效 各位网友大家好,今天我要带领大家开发一个纯CSS的图片分类显示的网址导航,单纯看标题大家可能有些困惑,依照以往惯例,我先给大家演示一下实际运 ...
- 利用CSS3 filter:drop-shadow实现纯CSS改变图片颜色
体验更优排版请移步原文:http://blog.kwin.wang/programming/css3-filter-drop-shadow-change-color.html 之前做项目过程中有时候遇 ...
- 举重若轻流水行云,前端纯CSS3实现质感非凡的图片Logo鼠标悬停(hover)光泽一闪而过的光影特效
原文转载自「刘悦的技术博客」https://v3u.cn/a_id_197 喜欢看电影的朋友肯定会注意到一个有趣的细节,就是电影出品方一定会在片头的Logo环节做一个小特效:暗影流动之间光泽一闪而过, ...
- 【web前端优化之图片模糊到清晰】看我QQ空间如何显示相片
前言 此篇文章估计不会太长,有移除首页的风险,但是老夫(称老夫是因为我们真正的叶小钗其实都100多岁啦)是不会怕滴.所以,我来了哟! 题外话:今天我们一起还看了一道前端的面试题,而后我本来还想多找几道 ...
- 分享11个纯css完成的图片浏览器
图片画廊用于在网站上显示系列图片,它已成为网站重要的组成部分.实现图片画廊有很多种方法,今天要与大家分享的是11个使用纯 CSS 实现的图片画廊,它们代码少,效果炫,加载速度快,希望能对大家有所帮助. ...
随机推荐
- 【LIS】【递推】Gym - 101246H - ``North-East''
x坐标排序,y坐标当权值,同一个x坐标的,y从大到小排. 求f(i)表示以i结尾的LIS以后,从后向前枚举,不断更新一个max数组,max(i)代表最长上升子序列为i时,当前的 结尾的最大值是多少. ...
- Codeforces Gym 100269G Garage 数学
Garage 题目连接: http://codeforces.com/gym/100269/attachments Description Wow! What a lucky day! Your co ...
- 消除Xcode 5中JosnKit类库的bit masking for introspection of objective-c 警告
Xcode 5中苹果对多个系统框架及相关类库进行了改进.之前建立的项目在Xcode 5中重新编译会产生一些新问题. JosnKit是常用的轻量级Josn解析类,在Xcode 5中: BOOL work ...
- 关于 js 中的回调函数 callback
本文写于1年前 曾经的学习文章如今拿出来分享 前言 其实我一直很困惑关于js中的callback,困惑的原因是,学习中这块看的资料少,但是平时又经常见,偶尔复制一下前人代码,功能实现了也就不再去追其原 ...
- 怎么查看和修改 MySQL 的最大连接数
通常,mysql的最大连接数默认是100, 最大可以达到16384.1.查看最大连接数:show variables like '%max_connections%';2.修改最大连接数方法一:修改配 ...
- 【mysql】备份篇1:使用系统计划任务+mysqldump 定时备份mysql数据库 不用输入密码自动导出sql文件
项目部署在服务期上之后,有了新的需求,需要每月定时备份mysql数据库的所有数据! 查找了网上的多篇文章之后,自己又对bat文件中的mysqldump语句进行改进,可以实现了不用输入密码就能自动定时备 ...
- openGl 基础
最近由于手机项目中需要用到OpenGL ES的知识,所以这段时间正在研究OpenGL的相关知识.因为OpenGL ES是OpenGL的剪裁版本,所以我直接从OpenGL入手,然后再去看OpenGL E ...
- InternalError: (pymysql.err.InternalError) (1205, u'Lock wait timeout exceeded; try restarting transaction')
在mysql innodb中使用事务,如果插入或者更新出错,一定要主动显式地执行rollback,否则可能产生不必要的锁而锁住其他的操作 我们在使用数据库的时候,可以使用contextlib,这样异常 ...
- c# 冒号:C#中两个冒号(::)的作用
global::System.Console.WriteLine(number); 冒号在什么地方用. 点是空间下类,表示下一层的意思? 这里面::前面是GAC的标示符global,用法比较特殊,和. ...
- git 命令02
1.怎么添加远程库2.克隆一个远程库3.什么是分支管理4.什么是标签管理3.搭建git服务器 1.添加远程库.我以github官网上提供给用户注册https://github.com/,可以在官网了自 ...