css background repeat-x，stretch-y

Question

我有一个渐变的条纹背景，我希望在x中重复并在y中拉伸。我认为这样可行：

background: url(bg.jpg) repeat-x;
background-size: auto 100%;

但它要么在y中延伸，要么在x中重复，而不是同时进行：

http://codepen.io/anon/pen/JCjEb

编辑请注意，我不能简单地在y中重复，因为条纹背景也有渐变（底部为深色，顶部较浅）。

Answer 1

您可以使用不含背景大小的background: url(bg.jpg) repeat;。这是example。

Answer 2

问题在于，当您将background-size设置为auto 100%时，它会按比例拉伸整个图像，从而使条纹过宽而扭曲。将x的{​​{1}}部分设置为原始图像的宽度，它将不再延伸。

background-size

http://jsfiddle.net/BsAcY/

Answer 3

不要给它宽度auto，而是给它图像的宽度（36px）。 http://codepen.io/thgaskell/pen/Bjsix

CSS

.c {
  background-size: 36px 100%;
}

Answer 4

尝试background: url(bg.png) center repeat-x;

不确定IE8及以下版本，如果这是一个问题。

Answer 5

  

.a {background：   URL（http://img.photobucket.com/albums/v63/promisedyouheaven/stripe2.gif）   重复;显示：块;宽度：500像素; }

这就是你需要的吗？

Answer 6

试试这个

** HTML **

<div class="b"></div>

** CSS for bg image＆amp;渐变**

.b {     /* unprefixed gradient for example only*/
  background: 
  linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(255,255,255,0) 100%),
  url(http://img.photobucket.com/albums/v63/promisedyouheaven/stripe2.gif);

  background-repeat:repeat;
}

div {
  height: 300px;
  width: 200px;
  margin-right: 50px;
  border:1px solid grey;
}

Codepen Example