Question

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

我的背景图像为3px x 3px图案。

我希望这个模式重复-x它所设置的元素的整个宽度（100％），但是我只希望它重复-y为元素宽度的一半（50％）。 / p>

我有这个实现：

.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％高度/宽度，而不是保持所需的重复效果。

有没有办法简单地完成这个？

由于

Answer 1

使用下面不同的背景制作一个3px宽且非常高的图形。或者，虽然更多代码，但是制作一个由三个div组成的“单位”：基数是一个div，你想要的任何其他颜色/图案将是y的50％。接下来，该div是重复到固定高度的背景，并且相对于基座的顶部定位。最后一个div就是内容。不像简单的CSS声明那么漂亮，但它适用于平台和大多数浏览器，甚至是IE6。

Answer 2

你的模式是怎样的？这可能符合您的要求。现在使用img元素而不是使用背景来显示PNG，并将宽度设置为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＆amp;中创建另一个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

CSS：'背景大小'和'背景重复：重复'拉伸问题

3 个答案: