CSS：使用-webkit-transform后的Base64背景图像变换 [英] CSS: Base64 background image transforms after using -webkit-transform

问题描述

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

I developed a simple navigation bar with a home icon using HTML and CSS.

现在，我要将菜单项的按钮转换为平行四边形。经过一个快速的研究，我注意到，许多人使用 -webkit-transform：skew（-20deg）（CSS）archieve这个。当我应用代码更改，房子图标也转换了。

Now I want to transform the button of the menu item into a parallelogram. After a quick research I noticed, that many people are using -webkit-transform: skew(-20deg) (CSS) to archieve this. When I applied the code changes, the house icon transformed as well.

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

Is there a way to turn my menu item into a parallelogram without transforming the Base64 background image?

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

推荐答案

不要将背景图片放在 li 上，将其放在锚点上，然后向后倾斜。

Don't put the background image on the li, put it on the anchor and then skew it back the other way.

基本上：

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

/ p>

and

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

这篇关于CSS：使用-webkit-transform后的Base64背景图像变换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！