html - 如何设置背景图案以从页面中心开始重复？

Question

我希望背景在页面顶部重复-x，但我希望它从中心开始重复，而不是在整个页面上重复。例如这样的：

Answer 1

一种方法是::after像这样使用伪选择器：

body::after {
    content: '';
    position: absolute;
    left: 50%;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
    background: url('http://i.imgur.com/2xPV3gf.png') repeat-x left top;
}

小提琴：http: //jsfiddle.net/Vf4Rm/

Answer 2

只是一个简单的背景 CSS 声明

background-position: center;

background-repeat: repeat-x;

Answer 3

像这样：

background-position:center;

但您还需要：

background-attachment:fixed;

随之而来。

从 w3schools 看到这个页面。

在这里摆弄

Answer 4

你可以尝试这样的事情：

<div class="bg-skew"></div>
<p>Lorem ipsum dolor sit amet...</p>

使用单独的元素来保存背景并使用绝对定位来设置偏移量。

CSS：

html, body {
    height: 100%;
}
.bg-skew {
    background-image: url('http://placekitten.com/50/50');
    background-repeat: repeat-x;
    background-position: 0 0;
    width: 50%;
    height: 100%;
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 0;
}

您还可以使用伪元素代替显式定义的元素。

您可能使用这种方法的原因是您有一个预定义的父容器。

Answer 5

使用 div （您可能想使用 z-index:-1;）与：

position: fixed;
margin-left:50%;
width:50%;

在这里摆弄