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屋!