类似于这种，这个时候出现了周围变模糊，并且边缘泛白的情况

周围模糊这个问题很好解决，给父容器加overflow:hidden；就可以了

效果如上，至于周围泛白的问题就需要动点脑筋了，给目标添加 transform: scale(1.2);  放大为原来的1.2倍，这样泛白的部分就可以隐藏起来看不见了。

最终效果

使用filter: blur() 的时候解决图片周围泛白和容器外范围变模糊的问题的更多相关文章

  1. 数据恢复软件使用经验-支持U盘，手机SD卡，硬盘数据，解决图片恢复后打不开的问题

    数据恢复软件使用经验-支持U盘,手机SD卡,硬盘数据.解决图片恢复后打不开的问题. 用过非常多数据恢复软件.最早EasyRecovery pro.恢复过U盘.手机SD卡,硬盘数据.但如今下载不了最新版 ...

  2. <转载>CSS解决图片过大撑破DIV的方法

    DIV+CSS网页内容中如果插入大于DIV层宽度显示,过大的图片将会撑破网页宽度显示从而网页严重变形,您是否遇到过?这里DIVCSS5给大家介绍几种解决图片撑破撑开网页DIV层方法. 图片撑破宽度解决 ...

  3. object-fit 解决图片指定大小被压缩问题

    object-fit 解决图片指定大小被压缩问题 第一次遇到这个属性,是在给video 写 poster的时候,选取的作为poster的img的尺寸有点小,导致video播放器两边有留白.在控制台查看 ...

  4. AngularJS进阶(三十六)AngularJS项目开发技巧之利用Service&Promise&Resolve解决图片预加载问题(后记)

    AngularJS项目开发技巧之利用Service&Promise&Resolve解决图片预加载问题(后记) 前言 在"AngularJS项目开发技巧之图片预加载" ...

  5. 移动端高清适配方案（解决图片模糊问题、1px细线问题）

    本文介绍了移动端适配的3种方法,以及移动端图片模糊问题和1px细线问题的解决方法.当然了,在这之前先整理了与这些方法相关的知识:物理像素.设备独立像素.设备像素比和viewport. >> ...

  6. 一行css解决图片统一大小后的拉伸问题(被冷漠的object-fit)

    一.先来个实战 1. 测试案例 需求: 要求表情库里所有表情包大小都固定 实际效果: 由于图片原始大小都不一样,强行设定大小值会导致拉伸,如果不设定大小则参差不齐.例如: //html <bod ...

  7. js 解决图片居中问题

    下述方法能够解决图片居中问题: (1)宽一些或者高一些(相对父元素的大小):图片在父元素的可视范围内显示图片的中间位置 (2)小一些(相对父元素的大小):图片在父元素的可视范围内居中显示 实现原理:根 ...

  8. Halcon的HWindowControl控件在WinForm程序中的使用介绍（重点解决图片缩放的问题）

     Halcon的HWindowControl控件在WinForm程序中的使用介绍(重点解决图片缩放的问题) 2016-12-04 20:11 362人阅读 评论(4) 收藏 举报  分类: Halco ...

  9. 解决图片插入word文档后清晰度降低的问题

    解决图片插入word文档后清晰度降低的问题 在默认情况下,word程序会自动压缩插入word文档中的图片以减小整个word文档的.当我们需要插入word文档中的图片保持原始清晰度时,可以通过设置wor ...

随机推荐

  1. 复选框（checkbox）、多选框

    1.需求分析 可同时选中多个选项,实现全选.全不选.反选等功能. 2.技术分析 基础的HTML.CSS.JavaScript. 3.详细分析 3.1 HTML部分 图示是一个列表加底部一段文字说明,列 ...

  2. JDBC 基本语法总结

    实现JDBC操作: 静态SQL执行 ① 注册驱动 Class.forName("com.mysql.jdbc.Driver"); ② 创建连接 Connection con = D ...

  3. react的ant design的UI组件库

    PC官网:https://ant.design/ 移动端网址:https://mobile.ant.design/docs/react/introduce-cn antd-mobile :是 Ant ...

  4. redis Connection refused 远程连接错误

    redis 远程连接时报错:  Exception in thread "main" redis.clients.jedis.exceptions.JedisConnectionE ...

  5. 7- vue django restful framework 打造生鲜超市 -商品类别数据展示(上)

    Vue+Django REST framework实战 搭建一个前后端分离的生鲜超市网站 Django rtf 完成 商品列表页 并没有将列表页的数据json 与前端的页面展示结合起来 讲解如果将dr ...

  6. Android系统中标准Intent的使用

    Android系统用于Activity的标准Intent 1.根据联系人ID显示联系人信息= Intent intent=new Intent(); intent.setAction(Intent.A ...

  7. Linux文件属性之文件权限介绍

    1)用ls -li 查看文件列表字段 红色代表的是inode 黄色代表的是文件权限 黄色里面的第一个 - 表示文件的类型(普通类型文件) d 表示目录(directory) l 表示链接文件(link ...

  8. （Winform）控件中添加GIF图片以及运用双缓冲使其不闪烁以及背景是gif时使控件（如panel）变透明

    Image img = Image.FromFile(@"C:\Users\joeymary\Desktop\3.gif"); pictureBox1.Image =img.Clo ...

  9. mysql-不恰当的update语句使用主键和索引导致mysql死锁

    背景知识:MySQL有三种锁的级别:页级.表级.行级. MyISAM和MEMORY存储引擎采用的是表级锁(table-level locking):BDB存储引擎采用的是页面锁(page-level ...

  10. Android stadio 电脑连上手机可以识别，但是连不上Android stadio

    原来是因为电脑没有装Android 手机驱动,我电脑刚装了系统. 很多驱动没有装.我有一个联想驱动管理,提示我装Android手机驱动.装完之后,就可以识别到手机了. 如果你的手机在电脑不识别,那么装 ...