0

我有一个带有渐变的条纹背景，我想在 x 中重复并在 y 中拉伸。我认为这会起作用：

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

但它要么在 y 中延伸，要么在 x 中重复，绝不会同时出现：

在此处输入图像描述 http://codepen.io/anon/pen/JCjEb

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

4

6 回答 6

1

您可以在background: url(bg.jpg) repeat;没有背景大小的情况下使用。这是示例。

于 2013-10-10T09:17:35.323 回答
1

问题是，当您将 设置为background-size时auto 100%，它将按比例拉伸整个图像，从而使条纹太宽且变形。将x部分设置background-size为原始图像的宽度，它将不再拉伸。

.b {
  background: url(http://img.photobucket.com/albums/v63/promisedyouheaven/stripe2.gif) repeat;
  background-size: 35px 100%;
}

http://jsfiddle.net/BsAcY/

于 2013-10-10T10:43:30.153 回答
1

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

CSS

.c {
  background-size: 36px 100%;
}
于 2013-10-10T10:46:11.943 回答
0

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

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

于 2013-10-10T10:11:25.583 回答
0

.a { 背景：网址（http://img.photobucket.com/albums/v63/promisedyouheaven/stripe2.gif）重复；显示：块；宽度：500 像素；}

那是你需要的吗？

于 2013-10-10T10:30:21.157 回答
0

试试这个

** HTML **

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

** 背景图像和渐变的 CSS **

.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;
}

代码笔示例

于 2013-10-10T10:41:21.540 回答