1

我确信这是我所拥有的实现的正确行为，但我想知道是否有一种简单的方法来完成我想要完成的事情。

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

我希望这种模式重复-x 其设置的元素的全宽（100%），但是我只希望它重复-y 其所在元素的一半宽度（50%）。

我有这个实现：

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

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

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

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

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

谢谢

4

3 回答 3

1

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

于 2013-05-10T14:38:42.187 回答
1

你的图案看起来怎么样？这可能会满足您的要求。现在，您不再使用背景来显示 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%;
}
于 2013-05-10T14:47:26.107 回答
0 
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

于 2013-05-10T14:59:53.823 回答