css - 无重复背景图和渐变同时出现

Question

如何同时使用不重复的背景图和渐变

// this only show some gradient
background-image: url('../../imgs/0/cart.png') no-repeat left center,-webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(204,204,204,1))); /* Saf4+, Chrome */

//This is ok
background-image: url('../../imgs/0/cart.png'),-webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(204,204,204,1))); /* Saf4+, Chrome */

Answer 1

“url('../../imgs/0/cart.png') no-repeat left center”不是 background-image 属性的有效值。这是 background 简写的有效值。

有两种方法可以在 CSS 中指定多个背景:作为简写属性列表，例如

    background: url('http://placekitten.com/256/150') no-repeat left center, linear-gradient(to bottom, rgba(238,238,238,1), rgba(204,204,204,1)) no-repeat;

或者喜欢每个子属性值的单独列表，比如

    background-image: url('http://placekitten.com/256/150'), -webkit-gradient(linear, 0 100%, 0 0, from(rgba(238,238,238,1)), to(rgba(204,204,204,1)));
    background-image: url('http://placekitten.com/256/150'), -webkit-linear-gradient(rgba(238,238,238,1), rgba(204,204,204,1));
    background-image: url('http://placekitten.com/256/150'), linear-gradient(rgba(238,238,238,1), rgba(204,204,204,1));
    background-repeat: no-repeat, no-repeat;
    background-position: left center, left top;
    background-size: auto, 100% 100%;

我建议使用后者，因为它不需要为所有带前缀的渐变版本复制背景重复等值。