1

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

// 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 */
4

2 回答 2

1

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

有两种方法可以在 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%;

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

于 2013-07-02T08:58:16.330 回答
-1

您需要为您在 BG 中设置的每个图像/渐变设置相同数量的值。 http://codepen.io/gcyrillus/pen/jfiyz

html {
  height:100%;
}
body {
  min-height:100%;
}
html  {
  background:#555;
  text-align:center;
  background:
    linear-gradient(-40deg,#222,transparent,#111) center repeat, 
    linear-gradient(40deg,#222,transparent,#111) center repeat, 
    linear-gradient(-40deg,#222,transparent,#111) center repeat, 
    linear-gradient(40deg,#222,transparent,#111) center repeat ,
    url(http://lorempixel.com/500/500/abstract/2)  center repeat
    ;
  background-size:95% 85%;
  background-position:center;
}
于 2013-07-02T08:41:14.207 回答