CSS:'；背景尺寸'；和'；背景重复：重复'；延伸问题

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

我有一个背景图像，是一个3px 3px模式

我想让这个模式在其设置的元素的全宽（100%）上重复-x，但是我只想在其设置的元素的半宽（50%）上重复-y

我有以下实施：

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

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

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

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

有没有办法简单地做到这一点

---

谢谢

用下面不同的背景制作一个3倍宽、非常高的图形。或者，尽管有更多的代码，但要用三个div组成一个“单位”：底面是一个div，上面有你想要的任何其他颜色/图案，这将是y的50%。该div中的下一个是重复到固定高度的背景，该背景相对于基座顶部定位。最后一个div就是内容。虽然没有简单的CSS声明那么漂亮，但它可以跨平台和大多数浏览器工作，甚至可以跨IE6。

您的模式看起来如何？这可能满足您的要求。不再使用背景来显示PNG，而是使用img元素，并将宽度设置为100%，高度设置为50%。或者使用div从背景中获益：

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

您可以在容器div内创建另一个div，并将其宽度设置为父容器div的50%。在此div内，您可以填充图案

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

---

不带背景尺寸。您可以使用多个背景，并使用渐变作为第二个背景。将渐变设置为100不透明，宽度为50%，它应该与其他背景图像重叠。

背景大小

在平铺前调整背景图像本身的大小-它不会调整平铺所占区域的大小。

背景重复

中缺少

：

。很抱歉，我只是尝试测试我所说的内容，并且没有像我使用hped那样工作。在元素类中使用高度：50%。问题是#myPattern作为相对元素，这意味着它将影响其他内容。我需要在背景上方的容器中包含其他内容。这里的缺点是模式不会作为img元素重复，它会拉伸/扭曲。我试着作为一个div绝对定位在一个背景上，但是它的行为似乎有点不稳定，因为绝对元素定位在相对元素之上（因此覆盖了所有其他元素），使用负z指数来表示。现在它几乎是第一个被画出来的。看一看中关于绘制顺序的注释。我的错误是，这确实有效-但是，在IE7、IE8/webkit/等中调整窗口大小时会出现一些问题。所有这些似乎都可以正常工作。不幸的是，IE7是这里的一个要求：（，不过我会给你一个向上的投票，谢谢。我最终把图案图像弄高了（达到我需要的程度）然后为了适应页面的响应性，当页面变小时，我简单地将其更改为重复x和y。这似乎是我能想到的最好和最简单的方法。

Add another container 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;
}