我的问题很奇怪，但很简单。我得到了一个类为navbaritem的div，由于某种原因，转换规则适用于边距，但不适用于背景。
这是HTML和CSS
* {
font-family: Raleway, Century Gothic;
}
body {
margin: 0px;
}
a {
text-decoration: none;
color: #fff;
}
header > ul > li {
margin-bottom: 5vh;
}
.navbaritem {
position: absolute;
width: 30vw;
height: 6vh;
margin-left: -8vw;
-webkit-transform: skew(-30deg);
-moz-transform: skew(-30deg);
-o-transform: skew(-30deg);
background: rgb(245,246,246);
background: -moz-linear-gradient(top, rgba(245,246,246,1) 0%, rgba(219,220,226,1) 21%, rgba(184,186,198,1) 49%, rgba(221,223,227,1) 80%, rgba(245,246,246,1) 100%);
background: -webkit-linear-gradient(top, rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%);
background: linear-gradient(to bottom, rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f6f6', endColorstr='#f5f6f6',GradientType=0);
transition: 0.4s ease;
}
.navbaritem:hover {
margin-left: -3vw;
transition: 0.4s ease;
}
.navbaritem > a {
height: 80%;
margin-top: 1%;
margin-left: -10%;
width: 90%;
background: url(../img/graystripes.jpg);
box-shadow: inset 3vh 1vh 3vh #000;
-webkit-transform: skew(30deg);
-moz-transform: skew(30deg);
-o-transform: skew(30deg);
position: absolute;
text-align: center;
font-size: 4vh;
}
.navbaritem:hover {
transition: 0.4s ease;
background: rgb(255,0,0);
background: -moz-linear-gradient(top, rgba(255,0,0,1) 0%, rgba(247,0,0,1) 21%, rgba(137,0,0,1) 49%, rgba(247,0,0,1) 80%, rgba(255,0,0,1) 100%);
background: -webkit-linear-gradient(top, rgba(255,0,0,1) 0%,rgba(247,0,0,1) 21%,rgba(137,0,0,1) 49%,rgba(247,0,0,1) 80%,rgba(255,0,0,1) 100%);
background: linear-gradient(to bottom, rgba(255,0,0,1) 0%,rgba(247,0,0,1) 21%,rgba(137,0,0,1) 49%,rgba(247,0,0,1) 80%,rgba(255,0,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#ff0000',GradientType=0);
}
.navbaritem > i {
font-size: 5vh;
color: #444;
margin-top: 1%;
margin-left: 85%;
-webkit-transform: skew(30deg);
-moz-transform: skew(30deg);
-o-transform: skew(30deg);
} <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="css/style.css">
<link type="text/css" rel="stylesheet" href="css/hover.css">
<link type="text/css" rel="stylesheet" href="css/font-awesome.css">
<link type="text/css" rel="stylesheet" href="css/font-awesome.min.css">
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Raleway:100,200,300,400,500,600,700,800,900">
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery-migrate-1.2.1.min.js"></script>
<script src="js/classie.js"></script>
</head>
<body>
<header>
<ul>
<li>
<div class="navbaritem">
<a href="#">Home</a>
<i class="fa fa-home"></i>
</div>
</li>
<li>
<div class="navbaritem">
<a href="#">Services</a>
<i class="fa fa-code"></i>
</div>
</li>
<li>
<div class="navbaritem">
<a href="#">Pricing</a>
<i class="fa fa-money"></i>
</div>
</li>
<li>
<div class="navbaritem">
<a href="#">References</a>
<i class="fa fa-flag"></i>
</div>
</li>
</ul>
<!--<div class="navbaritem">
<a href="#">Home</a>
<i class="fa fa-home"></i>
</div>-->
</header>
<main>
</main>
<footer>
</footer>
</body>
</html>就我而言，您无法转换渐变。一种方法是在完全相同的位置使用两个元素，并分别应用两个不同的梯度。然后将一个元素的不透明度设置为1（默认情况下，具有要显示的渐变的元素），然后在悬停时将该元素的不可见性渐变为0，将另一个渐变为1。不过我不建议这样做。
EDIT我在这里找到了一个解决方法：使用带有渐变背景的CSS3转换