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)
blank

相关推荐

  • 学生学籍管理系统_学生学籍管理系统的开发

    学生学籍管理系统_学生学籍管理系统的开发二需求分析2.1系统功能要求设计此系统实现如下系统功能:我们小组所设计的学生学籍管理数据库系统主要分为两大模块层面,一是:学生登录层面,二是:教师登录层面。不同层面根据不同用户的需求所实现的功能不同,这样能够更人性化地贴合个体的使用,最大程度地提升系统的使用及运行效率。所以系统设有两种不同的登录选择,用户根据实际情况自行登录,修改、查询、管理信息。学生层面:(1)

    2022年10月16日
  • springsession使用_常见的使用null场景

    springsession使用_常见的使用null场景目录一、同域名下相同项目(集群环境)实现Session共享1.思路2.架构图3.实现步骤一、同域名下相同项目(集群环境)实现Session共享在同一个域名下,比如:www.p2p.com同一个项目,部署了多台tomcat,这就是典型的集群。我们上一篇文章的入门案例就属于这种应用场景,只不过在实际开发的过程中,我们如果存在了tomcat集群,那么肯定会使用nginx进行负载均衡,那么这种情况下我们该如何处理。1.思路我们将上一个阶段的p2p项目实现集群部署下的Ses

  • com组件是什么东西_如何注册com组件

    com组件是什么东西_如何注册com组件COM编程——GUID和注册表2014年1月13日作者:果冻想1,129views暂无评论什么是GUID?做COM开发,就不得不去了解IID了,IID作为每一个接口的唯一标识符;我之前也有像下面这样定义一个IID://{2A06BBB3-667C-4D51-A8AD-F3CFDD7EF682}staticconstIIDIID_IX={0x

    2022年10月27日
  • 深度学习环境配置1——windows下的tensorflow-gpu=1.13.2环境配置

    深度学习环境配置1——windows下的tensorflow-gpu=1.13.2环境配置神经网络学习小记录42——windows下的tensorflow-gpu=1.13.2环境配置学习前言环境内容Anaconda安装下载Cudnn和CUDA配置tensorflow环境安装VSCODE学习前言好多人问环境怎么配置,还是出个教程吧。环境内容tensorflow-gpu:1.13.2keras:2.1.5numpy:1.17.4Anaconda安装取网上搜索Anacon…

  • 软引用SoftReference[通俗易懂]

    软引用SoftReference[通俗易懂]1.对象的引用类….  最近也是通过项目中知道了一些东西,涉及到了对象的引用类,对象的引用类分为多种,强引用(其实就是正常的引用),使用SoftReference实现软引用,WeakReference(弱引用) PhantomRefrence(虚引用)…这三个引用类我只详细的介绍一下SoftReference实现软引用…其他的就一笔带过….强引用:

发表回复

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

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