在悬停时使用缩放时背景图像 (svg) 模糊的问题答案

【问题标题】：Problem of blurring background image (svg) while using scale on hover在悬停时使用缩放时背景图像 (svg) 模糊的问题
【发布时间】：2019-10-16 01:18:02
【问题描述】：

我需要在悬停和聚焦时放大图像。悬停从 0.9 到 1，焦点从 1 到 1.2。问题是在缩放时，图片是模糊的。无论我从什么尺寸开始，0.9 或 1。我使用了两种解决方案：

transform: scale3d(.9, .9, .9);
transform: translateZ(0) scale (.9, .9);

但它不起作用（sn-p 中的解决方案）。

我做错了什么？也许还有其他解决方案？

.button {
  border: none;
  background-color: transparent;
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('https://svgshare.com/i/FWE.svg');
  width: 28px;
  height: 36px;
  transition: transform .3s ease, background .3s ease, opacity .2s ease;
  box-shadow: none;
  will-change: transform;
  transform: scale3d(.9,.9,.9);
  transform: translateZ(0) scale(.9, .9);
}

.button:hover {
  cursor: pointer;
  transform: scale3d(1,1,1);
  transform: translateZ(0) scale(1, 1);
}

.button:focus {
  outline: none;
  transform: scale3d(1.2,1.2,1.2);
  transform: translateZ(0) scale(1.2, 1.2);
}

<button class="button">
</button>
<button class="button">
</button>

【问题讨论】：

因为它是一个 svg，只是改变背景大小而不是使用比例不是更好吗？
类似这样的东西：jsfiddle.net/pnqku2fw/1
@Pete，很好的解决方案，但有一个颤抖。如何解决这个问题？
如果您为实际图像的宽度而不是背景设置动画，看起来会更流畅一些吗？ jsfiddle.net/h3ydrqmp/4
很遗憾，我无法将图片添加到 html 结构中，只能作为背景图像，但无论如何感谢

标签： html css svg css-transforms

【解决方案1】：

您可以将图像放入伪元素并转换该元素的大小 - 这样您将始终保持清晰的 svg（看起来比我们在 cmets 中讨论的任何其他方式都清晰得多）：

.button {
  cursor: pointer;
  outline: none;
  border: none;
  width: 36px;
  height: 36px;
  background-color: transparent;
  box-shadow: none;
  position: relative;
}

.button:after {
  content: '';
  display: block;
  background: url('https://svgshare.com/i/FWE.svg') center center no-repeat;
  background-size: contain;
  width: 26px;
  height: 26px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  transition: all .15s linear;
}

.button:hover:after {
  width: 30px;
  height: 30px;
}

.button:focus:after {
  width: 34px;
  height: 34px;
}

<button class="button">
</button>
<button class="button">
</button>

【讨论】：