Question

我的问题很奇怪但很简单。我得到了一个类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">
        <meta name="description" content="Offizielle Website von TesseractLabs">
        <meta name="author" content="Alexander Heuwes">
        
        <title>TesseractLabs | Home</title>
        
        <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>

Answer 1

就我而言，你无法转换渐变。一种方法是在完全相同的位置使用2个元素，分别应用2个不同的渐变。然后给一个元素一个不透明度为1（默认情况下你想要显示的渐变），然后将该元素的不透明度淡化为0，另一个元素悬停时淡化为1。但是我不建议这样做。

编辑我在这里找到了一个解决方法：Use CSS3 transitions with gradient backgrounds

CSS Transition不适用于背景

1 个答案: