图片模糊HTML代码

<html>
<head>
<style type="text/css">
.bg-blur {
float: left;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
}
</style>
</head>
<body>
<img src="http://img4.imgtn.bdimg.com/it/u=2576138561,591475829&fm=27&gp=0.jpg" />
<img class="bg-blur" src="http://img4.imgtn.bdimg.com/it/u=2576138561,591475829&fm=27&gp=0.jpg" />

</body>
</html>

时间: 2024-10-12 02:35:46

图片模糊HTML代码的相关文章

cocos2dx3.x 图片模糊解决方法

最近做cocos2dx ,由于在window平台上运行的游戏,故出很多问题,图片模糊就是其中一个. 下面给出我的解决方案,(由于用的cocostudio 加载的图片文件,故只能改源码解决了)(个人建议还是最好不要改源码) cocostudio文件加载进来后都会将图片放入cache里面. 故我们找到TextureCache类(即CCTextureCache)在里面添加一个公共函数 // add by xxj 2014/08/25 11:33:18 // 设置抗锯齿 void setAliasTex

UWP 图片模糊

原文:UWP 图片模糊 先看一下效果: 这是微识别的个人中心页面,顶部有头像,以及背景图片模糊. 要实现这样的效果,有两种方法. 第一种麻烦点,也是我现在用的.想看简单的,翻到最后 1. 首先看一下xaml代码: <StackPanel Grid.Row="0" x:Name="ibCover" CornerRadius="7"> <Button x:Uid="Button_Cover" Content=&q

【小程序】--------------处理canvas导出图片模糊问题-------------【劉】

一.业务需求: 使用canvas在前端生成海报,并在海报上添加上水印.最后导出图片并保存到本地. 二.业务逻辑实现: (1)创建canvas画布======>(2)在canvas上绘制海报========>(3)绘制水印===========>(4)绘制完成,导出图片路径=========>(5)保存到本地,并可以分享,(长按保存图片) 三.代码实现: (1).创建画布并将图片和水印绘制到canvas上const ctx = wx.createCanvasContext('myCa

原生js实现tab选项卡里内嵌图片滚动特效代码

<!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8"><title>原生js实现tab选项卡里内嵌图片滚动特效代码</title><meta name="keywords" content="原生js实现tab选项卡里内嵌图片滚动特效代码" /><meta name=&

【手机网页】手机网页显示图片模糊问题

[本文原创,谢绝转载] [总结] 1.手机浏览器,不管是UC.原生浏览器.safari,显示页面都是按照320px的 2.由于现在手机的宽度都大于320px,所以,图片会模糊 3.像苹果的retina屏幕的方式学习! 先把图片做成两倍长宽的大小,然后通过css样式强制做成原大小 [手机网页]手机网页显示图片模糊问题,布布扣,bubuko.com

ios图片瀑布流代码

ios瀑布流,实现简单的瀑布流视图布局,可以显示网络图片,下拉刷新,上拉加载更多. 下载:http://www.huiyi8.com/sc/9087.html ios图片瀑布流代码,布布扣,bubuko.com

css3简单实现图片模糊过滤效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>     <meta http-equiv="Cont

常用的jQuery九宫格布局图片展示特效代码

jquery九宫格布局图片鼠标经过遮罩显示文字效果 jQuery图片九宫格布局鼠标悬停显示文字效果代码 jquery九宫格图片制作鼠标悬停图片滑动展示特效 jquery仿qq图片九宫格布局点击按钮图片换一换效果代码 jQuery响应式图片九宫格布局点击图片查看大图效果代码 jquery hover事件鼠标悬停九宫格图片高亮显示代码 jQuery百度新闻文字列表九宫格布局鼠标悬停文字滑动效果代码 jquery hover九宫格图片鼠标悬停上下滑动图片切换显示代码 jquery win8风格九宫格布

图片旋转js代码

function rotateImage(imgId) { imageToRotate = document.getElementById(imgId); imageToRotate.style.filter= "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand')"; rotate(); } var imageToRotate; var degreeToRotate=0; function rotat