CSS：使用 -webkit-transform 后的 Base64 背景图像转换答案

【问题标题】：CSS: Base64 background image transforms after using -webkit-transformCSS：使用 -webkit-transform 后的 Base64 背景图像转换
【发布时间】：2015-11-30 20:25:41
【问题描述】：

我使用 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>

【问题讨论】：

我猜你认为背景是平行四边形，而房子仍然是直立的？
是的，完全正确。目前我想知道，为什么渐变没有变换，而主图像确实变换..
@渐变实际上是是变换的。水平倾斜的垂直渐变看起来没有倾斜。试试-webkit-linear-gradient(0deg, orange, red)，你会看到

标签： css

【解决方案1】：

不要把背景图片放在li上，把它放在锚点上，然后再往反方向倾斜。

基本上：

.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>

【讨论】：