CSS：'Background-size‘和'background-repeat: repeat’拉伸问题

Question

我确信这对于我的实现来说是正确的行为，但我想知道是否有一种简单的方法来完成我想要完成的任务。

我有一个3px x 3px模式的背景图像。

我想让这个模式重复-x元素的全宽度(100%)，但是我希望它只对元素宽度的一半(50%)重复-y。

我有这样的实现：

.element {
    width: 100%;
    background-image: url('/path/to/pattern.png');
    background-repeat: repeat;
} 

其在整个元素中成功地重复该模式。为了尝试达到50%的repeat-y高度，这是我想要的，我尝试了：

.element {
    width: 100%;
    background-image: url('/path/to/pattern.png');
    background-repeat: repeat;
    background-size: 100% 50%;
} 

但是，背景大小会将图案图像倾斜到100%/50%的高度/宽度，而不是保持所需的重复效果。

有什么方法可以简单地实现这一点吗？

谢谢

Answer 1

用下面不同的背景制作一个3px宽和真正高的图形。或者，虽然代码更多，但可以由三个div组成:底部是一个div，其中包含您想要的任何其他颜色/图案，它将是y的50%。下一个div是重复到固定高度的背景，并且该div相对于底部的顶部定位。最后一个div就是内容。不像一个简单的CSS声明那么漂亮，但是它可以跨平台和大多数浏览器工作，甚至是IE6。

Answer 2

你的图案是什么样子的？这可能会满足您的需求。现在不使用背景来显示PNG，而是使用img元素，并将宽度设置为100%，高度设置为50%。或者使用div从背景中获益：

<div id="element">
    <div id="pattern"/>
    <div>I'm at the top!<div>
</div>    

规则：

* {
  margin: 0;
  padding: 0;
}

html, body {
    height: 100%;
}

#element {
    position: relative;
    min-height: 100%;
}

#element #pattern {
    background: url(path/to/pattern.png);
    height: 50%;
    left: 0px;
    position: absolute;
    z-index: -1;
    top: 0px;
    width: 100%;
}

Answer 3

Add another container div

您可以在容器div中创建另一个div，并将其宽度设置为父容器div的50%。在这个div中，你可以填充你的模式。

<div id="container">
<div id="myPattern"></div>

​

#container{
        width:200px;
        height:400px;
        background-color:black;
    }      

#myPattern
{
    background-color:yellow;
    height:50%;
    width:100%;
    /* fill pattern here */
    background-image: url(tt.png);
    background-repeat: repeat-x repeat-y;
}

JSFiddle