0

ページの上部で背景を繰り返す-x が必要ですが、ページ全体ではなく、中央から繰り返しを開始したいと考えています。たとえば、次のようなものです。

ここに画像の説明を入力

4

5 に答える 5

2

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/

于 2013-08-28T21:01:18.857 に答える
0

div を使用します (おそらく z-index:-1; を使用する必要があります)。

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

ここでフィドル

于 2013-08-28T21:09:14.840 に答える
0

次のようなことを試すことができます：

<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;
}

明示的に定義された要素の代わりに疑似要素を使用することもできます。

このアプローチを使用する理由は、事前定義された親コンテナーがある場合です。

于 2013-08-28T21:05:18.460 に答える
0

このような：

background-position:center;

ただし、以下も必要です。

background-attachment:fixed;

それと一緒に。

w3schools のこのページを参照してください。

ここでフィドル

于 2013-08-28T20:32:16.380 に答える