CSS使图片变模糊,亲测非常好用「建议收藏」

CSS使图片变模糊,亲测非常好用

大家好,又见面了,我是全栈君。

文章目录
效果图
html代码
css代码
效果图

在这里插入图片描述
html代码

<div class="blur container">
  <div>
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1548676269108&di=64d110c6c0c15d9bc77c7ffd4f049f1b&imgtype=0&src=http%3A%2F%2Fe.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F6a63f6246b600c33d32b0328174c510fd8f9a184.jpg" />
  </div>
</div>

css代码

<style type="text/css">
body, html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
.container {
  padding: 20px;
  position: relative;
  overflow: hidden;
}
img {
  height: 200px;
  transition: .5s ease-in-out;
}
.container div {
  width: 300px;
  overflow: hidden;
  float: left;
  margin-left: 40px;
}
.blur img {
  filter: blur(15px);
  -webkit-filter: blur(15px);
}
.blur img:hover {
  filter: blur(0);
  -webkit-filter: blur(0);
}
</style>

关键代码 > filter: blur(0); 数值越大越模糊!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/111757.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • Python编程题2–水仙花数

    Python编程题2–水仙花数题目如果一个3位数等于其各位数字的立方和,则称这个数为水仙花数。例如:153=13+53+3^3,因此153就是一个水仙花数请按照从小到大的顺序输出1000以内的水仙花数

  • 漫谈词向量

    漫谈词向量原文:Onwordembeddings作者:SebastianRuder译者:KK4SBB审校:王艺责编:何永灿,关注人工智能,投稿请联系heyc@csdn.net或微信号289416419目录词向量的来历词向量模型语言建模概述经典的神经语言模型C&amp;W模型Word2VecCBOWSkip-gram非监督式学习得到…

  • 史上最简单的SpringCloud教程 | 第六篇: 分布式配置中心(Spring Cloud Config)(Finchley版本)

    史上最简单的SpringCloud教程 | 第六篇: 分布式配置中心(Spring Cloud Config)(Finchley版本)转载请标明出处:http://blog.csdn.net/forezp/article/details/70037291本文出自方志朋的博客在上一篇文章讲述zuul的时候,已经提到过,使用配置服务来保存各个服务的配置文件。它就是SpringCloudConfig。一、简介在分布式系统中,由于服务数量巨多,为了方便服务配置文件统一管理,实时更新,所以需要…

  • ki51单片机流水灯c语言程序,STC89C51单片机流水灯程序

    ki51单片机流水灯c语言程序,STC89C51单片机流水灯程序原标题:STC89C51单片机流水灯程序由于程序花样显示比较复杂,所以完全可以通过查表得方式编写程序,简单。如果想显示不同的花样,只需要改写表中的数据即可。:#include”reg51.h”#defineuintunsignedint#defineucharunsignedcharconsttable[]={0xfe,0xfd,0xfb,0xf7,0xef,0xdf,0xbf,…

  • linux抓包和分析工具_linux tcpdump 抓包

    linux抓包和分析工具_linux tcpdump 抓包实践中,通常在Linux里用tcpdump命令抓包,然后在Windows里用wireshark软件分析包。较通用的tcpdump命令:tcpdump-ieth0-s0-wpackage.cap注[对eth0进行完整数据包抓取,数据包输入保存到当前目录package.cap中,因为没有-c参数限制,须按Ctrl+C停止抓包]—————–

    2022年10月14日
  • 主成分分析与因子分析及SPSS实现[通俗易懂]

    主成分分析与因子分析及SPSS实现[通俗易懂]主成分分析与因子分析及SPSS实现一、主成分分析(1)问题提出在问题研究中,为了不遗漏和准确起见,往往会面面俱到,取得大量的指标来进行分析。比如为了研究某种疾病的影响因素,我们可能会收集患者的人口学资料、病史、体征、化验检查等等数十项指标。如果将这些指标直接纳入多元统计分析,不仅会使模型变得复杂不稳定,而且还有可能因为变量之间的多重共线性引起较大的误差。有没有一种办法能对信息进行浓缩,减少变量的个…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号