【问题标题】:CSS - Blurry image/text when rezisingCSS - 调整大小时模糊图像/文本
【发布时间】:2015-06-24 16:27:09
【问题描述】:

我正在我的网站上制作悬停效果,您可以在其中悬停图像 (png),它们的大小会变大。我遇到的问题是它们现在在调整大小时变得模糊。

我使用的代码如下所示:

.div {
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: perspective(1000px) translate3d(0,0,1px);
transform: perspective(1000px) translate3d(0,0,0);
}

.div:hover {
-webkit-transform: perspective(100px) translate3d(0,0,1px);
transform: perspective(100px) translate3d(0,0,31px);

}

你可以看到这个jsfiddle的效果:enter link description here

有没有办法解决这个问题?

【问题讨论】:

标签: html css transform blurry


【解决方案1】:

我认为规模会更适合这个。此解决方案仅在缩放期间模糊。

.square {
  width:100px;
  height: 100px;
  background-color:black;
  margin: 50px;
}
p {
  color:white;
  text-align: center;
  padding-top: 35px;
}
.square {
  -webkit-transition: -moz-transform .3s ease-out; 
  -moz-transition: -webkit-transform .3s ease-out; 
  -o-transition: -o-transform .3s ease-out; 
  transition: transform .3s ease-out; 
}
.square:hover {
  -webkit-transform: scale(2);  
  -moz-transform: scale(2);    
  -o-transform: scale(2);
  transform: scale(2);
}
<div class="square">
  <p>Some text</p>                        
</div>

【讨论】:

  • 谢谢,这似乎有效。但是,如果它是您使用的图像,您会怎么做?例如:jsfiddle.net/q44o0foo/5 图像变得模糊,我想这是正常的,因为它正在放大。如果我将它保存为两倍大小,然后将其强制降低到 50%,然后最终在悬停时调整它的大小,那会起作用吗?或者通常如何处理图像?
  • 要缩放图像,建议使用 SVG,但如果是复杂图像,我会按照您的建议进行操作。您还可以查看图像渲染属性,这些属性虽然很简陋,但确实提供了一些帮助。
猜你喜欢
  • 1970-01-01
  • 2018-11-27
  • 1970-01-01
  • 2018-07-06
  • 1970-01-01
  • 2021-03-17
  • 1970-01-01
  • 1970-01-01
  • 2021-12-20
相关资源
最近更新 更多