img标签在某些css样式下变得模糊

最新推荐文章于 2024-04-26 22:25:00 发布
最新推荐文章于 2024-04-26 22:25:00 发布
阅读量4.4k 收藏
点赞数 1
分类专栏： HTML5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zi__kang/article/details/84029921
版权

由于自动适应位置的情形，我经常将logo绝对定位然后再通过移动来让logo上下居中或者上下左右居中，但是这往往会造成img标签展现的时候变得模糊，比如下面这样的对比就可以明显的看出其变得模糊了：

（变得模糊的logo）（正常情况下的logo）

起初以为是在不知情的情况下加上了透明度，但是找了半天才却发现原来是受到了css样式中的transform的影响，不知道为啥会这样？

 

zi__kang
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
关于img标签缩小后模糊的解决方案
棉花没有糖的博客
08-25 5391
网上尝试方案： 1.image-rendering: pixelated; // 像素化，出现锯齿状，pass 2.image-rendering: crisp-edges; // 无效 3.只设置width // 无效，还是会模糊 最终解决方案： width: 100px; height: 200px; object-fit: cover; 关于很多人分不清object-fit各个参数的效果，其实根据单词含义能推测出来： 原图： 1.fill：充满 拉伸图片达到设置的宽高（在contain的基础下，哪
css3中新增的样式使用示例附效果图
09-25
CSS3的`border-radius`属性让创建圆角变得非常简单。例如，要给元素设置所有角都为5像素的圆角： ```css border-radius: 5px; ``` 或者，单独设置某个角的圆角半径： ```css border-top-left-radius: 5px; `...
CSS使图片变模糊
热门推荐
小龙哒的博客
01-28 1万+
文章目录效果图html代码css代码 效果图 html代码 <div class="blur container"> <div> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1548676269108&di=64...
css3特性-使图片变模糊
最新发布
h131425q的博客
04-26 239
* blur 是一个函数 小括号里面数值越大，图片越模糊 单位px */
img标签设置图片大小后 出现模糊的情况解决
超级小恐龙~
01-18 4312
image-rendering mdn链接image-rendering - CSS（层叠样式表） | MDN CSS属性image-rendering用于设置图像缩放算法。它适用于元素本身，适用于元素其他属性中的图像，也应用于子元素。 用法 img { image-rendering:-moz-crisp-edges; image-rendering:-o-crisp-edges; image-rendering:-webkit-optimize-contrast; image-...
通过CSS样式缩放图片导致图片模糊的解决方案
weixin_43130844的博客
05-26 6651
在进行前端页面开发的过程中，通过使用CSS对图片进行等比例缩放，存在会使图片失真的情形。这种情况有点违反我们的通常认知，毕竟放大图片会使图片失真这很正常，但是缩小图片通常应该会使图片变清晰才对。目前我查找了很多资料都还没发现哪篇文章有深入分析其中的原理，姑且认为这是浏览器根据CSS样式显示图片的策略不同于常规图片查看软件。 那么遇到这种情况，有什么解决方案呢？ 方案一：使用CSS3的image-rendering属性 .img { image-rendering:-moz-crisp-edges;
Img 设置宽高尺寸后模糊失真
醒途
02-19 868
建议大图可以根据需要添加缩放算法，并且所有图用二倍图这样清晰度上会有所改善。添加图像缩放算法，但要注意图片尺寸很小时候会出现“毛边”，还不如不加。
HTML img图片设置宽高之后失真模糊
weixin_46607967的博客
07-25 3257
HTML img图片设置宽高之后失真模糊的解决方法
CSS3悬停马赛克样式滤镜特效
07-24
在“CSS3悬停马赛克样式滤镜特效”中，关键的滤镜是`blur()`，它用于使元素变得模糊，参数值代表模糊半径，单位通常是像素。例如，我们可以设置一个默认的模糊半径，使图片在未被鼠标悬停时呈现马赛克效果： ```css...
CSS样式表.docx
03-11
借助 CSS 强大的功能，网页将在您丰富的想象力下千变万化。下面我们来学习 CSS 的基础知识。 一、CSS 语句的基本结构 CSS 语句的基本结构是选择符{属性：属性值}。其中，选择符可以是 HTML 中任何的标识符，比如 P...
CSS3悬停放大图片两边模糊显示.zip
07-04
模糊效果则可能通过`filter`属性中的`blur()`函数实现，它可以对元素添加模糊效果，使得图片边缘变得不清晰。 具体实现步骤可能包括以下几步： 1. **设置基础样式**：首先，为所有的图片设定初始样式，包括大小、...
CSS3实现的鼠标悬停图片模糊过渡动画特效源码.zip
11-02
其中，`filter: blur()`就是用来使元素变得模糊的。通过设置`blur-radius`值，我们可以控制模糊的程度。例如，`filter: blur(5px)`将使元素模糊5像素。 这个特效可能涉及到的关键CSS3技术有： 1. **`:hover`伪类**...
CSS改变图片由模糊到清晰
lovegonghui的专栏
11-03 8506
使用纯CSS使用的图片初始为模糊，鼠标放在图片上后变得清晰。使用滤镜的可以实现。 模糊时的图片：                                                                                                                                    清晰后的图片：
css中图片不清晰解决方法
jojo1001的博客
11-16 9815
图片不清晰问题： 用100%设置其宽度（高度不用设置，长宽只设置一个） 如果不起作用可以长沙给img加入以下属性 image-rendering 属性用于设置图像缩放算法。它适用于元素本身，适用于元素其他属性中的图像，也应用于子元素。此属性对于未缩放的图像没有影响。 .img { image-rendering: -webkit-optimize-contrast; } 加入这段代码后图片变得很清晰（使用了某些图像处理的算法来达到这样的效果） ...
filter滤镜实现img图片的CSS蒙版效果、模糊效果
草巾冒小子的博客
06-23 4339
filter滤镜实现img图片的CSS蒙版效果、模糊效果 项目中我们经常会遇到这样的需求：图片在鼠标经过或者悬停的时候，出现一层模糊的蒙版效果。 这里将会用到：filter这一属性。 文章目的：总结一下该属性，及img图片模糊的蒙版效果的实现方法。 下面我们就来总结一下，这层模糊的蒙版效果的实现方法。 首先看一下效果图。 1. 效果图 ...
CSS 图片变模糊
honey_kg的博客
06-26 362
CSS图片变模糊
原来css实现图片模糊这么简单
榕城候佳人的博客
04-08 1423
相信很多小伙伴在写前端时都喜欢用图片做背景，尤其是下面这种背景图片搞模糊一些，让可视栏的内容更加突出。
用css写背景模糊的三种情况
weixin_73529240的博客
11-02 7728
今天一下午什么都没干，只搞了这个模糊效果和动画还有一个发光按钮的效果，不过当真正攻克难关的时候还是感觉很开心的，一定一定要把基础知识掌握牢固（比如overflow和after的两个引号），其实最难的往往还是最基础的知识，因为东西就这么多，就摆在这里，再多的花样也逃不出这些基础知识的范围，花活谁都会整，有基本才是硬道理。关关难过关关过，前路漫漫亦灿灿嘛。
html img图片模糊效果
邓轩的博客
06-19 1万+
最近项目中有一个图片素材需要收费，不能下载和预览于是想到图片模糊处理，网上找了找资料先看效果图： 处理前： 处理后： CSS代码： .blur { filter: blur(20px); -webkit-filter: blur(20px); /* chrome, opera */ -ms-filter: blur(20px); -moz...
img标签的draggable在CSS中使用的代码示例
05-31
`draggable` 属性是 HTML 中的属性，它不能直接在 CSS 中使用。但是，我们可以使用 CSS 选择器来选中带有 `draggable` 属性的元素，并为其设置样式。 例如，我们可以使用以下 CSS 代码来为所有带有 `draggable` 属性的 `img` 元素设置禁止拖动的样式： ```css img[draggable="true"] { -webkit-user-drag: none; /* 禁止 Safari 中的拖拽 */ user-drag: none; /* 禁止 Chrome 和 Firefox 中的拖拽 */ -moz-user-select: none; /* 禁止 Firefox 中的选中文本 */ -webkit-user-select: none; /* 禁止 Safari 和 Chrome 中的选中文本 */ -ms-user-select: none; /* 禁止 IE 中的选中文本 */ user-select: none; /* 禁止所有浏览器中的选中文本 */ } ``` 此代码将选择所有 `draggable="true"` 的 `img` 元素，并为其设置禁止拖动和选中文本的样式。注意，不同浏览器对于禁止拖动和选中文本的 CSS 属性支持不一样，所以这里使用了多种属性来兼容不同的浏览器。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值