CSS:使用 -webkit-transform 后 Base64 背景图像变换

Question

我使用 HTML 和 CSS 开发了一个带有主页图标的简单导航栏。

现在我想将菜单项的按钮变成平行四边形。经过快速研究后，我注意到，许多人正在使用 -webkit-transform: skew(-20deg) (CSS) 来实现这一点。当我应用代码更改时，房子图标也发生了变化。

有没有办法将我的菜单项变成平行四边形而不转换 Base64 背景图像？

.menu-item {

  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAQyQAAEMkBvUIKYQAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAIxSURBVFiF7dZNiA9xHAbwz9jdQshGtOQge1jiIm/tQUmtlygHpbYkjlo3uchBsaUclJcTB1F7IyeFixwcFEmbwmGRt7XW0mLXWj+H/280/mbt7uybw37rOcwz83yf5zfz/c1MEkIwkTVlpA2SJJk+IQGSUjXjUZIktYUThBCGDVThEkLEO6ws1KuA+Szcypin+IyNYxoAC/EwY3ode9ATj3uxK0fXhq6IVYUCYDleZsxPoyKeW4+Pke/HgTJtR0a3btgBsCGmD/iBpshvxzEkOQGPZ/TthQOgMd7agE/YHPmDcbUBl+NgLkJrxuw8KvC6UAAcws8obIurrMKFnCG8iZmoxp0Mfw0N6BxyAKX3w5lMk7uYhzm4nWOe4gFqMBVXMvwdrMazQQNgGq5mxC2x4dLYYCDzFG2oi4s4l+EfYQUWDBgAc+NqU9HRyDdkhnAo+ID6qD2c4Z+jLjcAluBJvLAHjZFvUpr8oZqn+Iodscde9EW+A2v/CBCfz7t4QTvqUYmzBYyz6Mf+6LEV3ZHvxpbI24Yv8UQrFmM2bozQPIvmaLYG7yPXh91wCq9wQmkb1eLxKJqnuKi0hWtwEvdxJG8XtIyBeYpN5X55/wNJDjda9VfvEf8RjbQmA1QW1N1TetenVYN9mDFeAXaGEF5kiSRJ3qJ5uI2KPoLvOdy3Io0mfAYmA/yXAbrGyKsXb8rJJP0m/yaSpArL/Puj8jSE0F+mq8b8fwToDCG0DxpgvOsX4GsAgGyBKX8AAAAASUVORK5CYIIcbe2aef26d1d661fa25460533e355fef') no-repeat center, -webkit-linear-gradient(orange, red);

  height: 50px;

  width: 100px;

  -webkit-transform: skew(-20deg)
 
}

.menu-item:hover{

background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAQyQAAEMkBvUIKYQAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAIxSURBVFiF7dZNiA9xHAbwz9jdQshGtOQge1jiIm/tQUmtlygHpbYkjlo3uchBsaUclJcTB1F7IyeFixwcFEmbwmGRt7XW0mLXWj+H/280/mbt7uybw37rOcwz83yf5zfz/c1MEkIwkTVlpA2SJJk+IQGSUjXjUZIktYUThBCGDVThEkLEO6ws1KuA+Szcypin+IyNYxoAC/EwY3ode9ATj3uxK0fXhq6IVYUCYDleZsxPoyKeW4+Pke/HgTJtR0a3btgBsCGmD/iBpshvxzEkOQGPZ/TthQOgMd7agE/YHPmDcbUBl+NgLkJrxuw8KvC6UAAcws8obIurrMKFnCG8iZmoxp0Mfw0N6BxyAKX3w5lMk7uYhzm4nWOe4gFqMBVXMvwdrMazQQNgGq5mxC2x4dLYYCDzFG2oi4s4l+EfYQUWDBgAc+NqU9HRyDdkhnAo+ID6qD2c4Z+jLjcAluBJvLAHjZFvUpr8oZqn+Iodscde9EW+A2v/CBCfz7t4QTvqUYmzBYyz6Mf+6LEV3ZHvxpbI24Yv8UQrFmM2bozQPIvmaLYG7yPXh91wCq9wQmkb1eLxKJqnuKi0hWtwEvdxJG8XtIyBeYpN5X55/wNJDjda9VfvEf8RjbQmA1QW1N1TetenVYN9mDFeAXaGEF5kiSRJ3qJ5uI2KPoLvOdy3Io0mfAYmA/yXAbrGyKsXb8rJJP0m/yaSpArL/Puj8jSE0F+mq8b8fwToDCG0DxpgvOsX4GsAgGyBKX8AAAAASUVORK5CYIIcbe2aef26d1d661fa25460533e355fef') no-repeat center, -webkit-linear-gradient(red,orange);

}

.menu-item a {

  color: transparent !important;

}

li {

  list-style-type: none;

}

.nav-primary {

  background: #222;

}

<nav class="nav-primary">
  <ul>
    <li class="menu-item"><a href="#">Home</a>
    </li>
  </ul>
</nav>

Answer 1

不要将背景图片放在 li 上，将其放在 anchor 上，然后以另一种方式向后倾斜。

本质上:

.menu-item {
  background: -webkit-linear-gradient(orange, red);
  height: 50px;
  width: 100px;
  -webkit-transform: skew(-20deg)
}

和

.menu-item a {
  height: 100%;
  display: block;
  background: url('data:image/png;base64,...etc) no-repeat center center;
  -webkit-transform: skew(20deg)
}

.menu-item {
  background: -webkit-linear-gradient(orange, red);
  height: 50px;
  width: 100px;
  -webkit-transform: skew(-20deg)
}
.menu-item a {
  height: 100%;
  display: block;
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAQyQAAEMkBvUIKYQAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAIxSURBVFiF7dZNiA9xHAbwz9jdQshGtOQge1jiIm/tQUmtlygHpbYkjlo3uchBsaUclJcTB1F7IyeFixwcFEmbwmGRt7XW0mLXWj+H/280/mbt7uybw37rOcwz83yf5zfz/c1MEkIwkTVlpA2SJJk+IQGSUjXjUZIktYUThBCGDVThEkLEO6ws1KuA+Szcypin+IyNYxoAC/EwY3ode9ATj3uxK0fXhq6IVYUCYDleZsxPoyKeW4+Pke/HgTJtR0a3btgBsCGmD/iBpshvxzEkOQGPZ/TthQOgMd7agE/YHPmDcbUBl+NgLkJrxuw8KvC6UAAcws8obIurrMKFnCG8iZmoxp0Mfw0N6BxyAKX3w5lMk7uYhzm4nWOe4gFqMBVXMvwdrMazQQNgGq5mxC2x4dLYYCDzFG2oi4s4l+EfYQUWDBgAc+NqU9HRyDdkhnAo+ID6qD2c4Z+jLjcAluBJvLAHjZFvUpr8oZqn+Iodscde9EW+A2v/CBCfz7t4QTvqUYmzBYyz6Mf+6LEV3ZHvxpbI24Yv8UQrFmM2bozQPIvmaLYG7yPXh91wCq9wQmkb1eLxKJqnuKi0hWtwEvdxJG8XtIyBeYpN5X55/wNJDjda9VfvEf8RjbQmA1QW1N1TetenVYN9mDFeAXaGEF5kiSRJ3qJ5uI2KPoLvOdy3Io0mfAYmA/yXAbrGyKsXb8rJJP0m/yaSpArL/Puj8jSE0F+mq8b8fwToDCG0DxpgvOsX4GsAgGyBKX8AAAAASUVORK5CYIIcbe2aef26d1d661fa25460533e355fef') no-repeat center center;
  -webkit-transform: skew(20deg)
}
.menu-item:hover {
  background: -webkit-linear-gradient(red, orange);
}
.menu-item a {
  color: transparent !important;
}
li {
  list-style-type: none;
}
.nav-primary {
  background: #222;
}

<nav class="nav-primary">
  <ul>
    <li class="menu-item"><a href="#">Home</a>
    </li>
  </ul>
</nav>