无法在Chrome / Safari中结合使用CSS Sprite和背景渐变

KingKongFrog 发表于 Dev

金刚蛙

过去可以正常使用，但是最近渐变在Webkit中无法正常工作。似乎在Firefox中很好。有人可以检查我是否设置错误。不要注意图像。它是我无法渲染的渐变。有什么想法吗？

-webkit-gradient

用户名

这是由于语法过旧，通常webkit / blink现在允许使用无厂商值。

通常，您应该使用：pseudo- element- > http://jsfiddle.net/UdxUg/6/

无论如何，这是一个有效的代码。

与图像一起使用

.create {
    border: 1px solid #63ac5c;
    background: #d9ead8 url('http://tinyurl.com/mezxsk6') no-repeat 0px -10px;
    background: url('http://tinyurl.com/mezxsk6') no-repeat 0px -10px, -webkit-gradient(linear, left top, left bottom, color-stop(0%, #dbe8d9), color-stop(100%, #bcd7b9));
    /* Safari 4+, Chrome 2+ */
    background: url('http://tinyurl.com/mezxsk6') no-repeat 0px -10px, -moz-linear-gradient(top, #dbe8d9, #bcd7b9);
    background: url('http://tinyurl.com/mezxsk6') no-repeat 0px -10px, -webkit-linear-gradient(top, #dbe8d9, #bcd7b9);
    background: url('http://tinyurl.com/mezxsk6') no-repeat 0px -10px, linear-gradient(top, #dbe8d9, #bcd7b9);
    height: 23px;
    text-align:center;
}

改用这个

.create {
    border: 1px solid #63ac5c;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #dbe8d9), color-stop(100%, #bcd7b9)); /* Safari 4+, Chrome 2+ */  
    background: -webkit-linear-gradient(top,  #dbe8d9, #bcd7b9);
    background: -moz-linear-gradient(top,  #dbe8d9, #bcd7b9);
    background: linear-gradient(top,  #dbe8d9, #bcd7b9);

    height: 23px;
    text-align:center;
    position: relative
}
    
.create:before {
    content: '';
    background: #d9ead8 url('http://tinyurl.com/mezxsk6') no-repeat 0 0;
    height: 23px;
    width: 23px;
    position: absolute;
    top: 0;
    left: 0;
}