1

これは私が持っている実装では正しい動作だと確信していますが、達成したいことを簡単に行う方法があるかどうか疑問に思っています。

3px x 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%;
}

ただし、background-size は、目的の繰り返し効果を維持する代わりに、パターン イメージを 100%/50% の高さ/幅に歪めます。

これを簡単に達成する方法はありますか？

ありがとう

4

3 に答える 3

1

以下の異なる背景を使用して、幅 3 ピクセル、高さ 3 ピクセルのグラフィックを作成します。または、より多くのコードを使用して、3 つの div の「ユニット」を作成します。ベースは、必要な他の色/パターンを持つ div であり、y の 50% になります。その div の次は、固定の高さまで繰り返される背景で、ベースの上部に対して相対的に配置されます。最後の div は単なるコンテンツです。単純な CSS 宣言ほどきれいではありませんが、プラットフォームやほとんどのブラウザー (IE6 を含む) で機能します。

于 2013-05-10T14:38:42.187 に答える