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 属性的有效值。它是背景简写的有效值。

在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%;

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

Answer 2

您需要为在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;
}

不重复背景图像和渐变同时

2 个答案: