css - css3で複数の背景画像を使用する

Question

私は成功せずにdivで複数の背景を使用しようとしていますが、誰かが私が間違っているところを私に示唆することができます、以下は私が使用しているcssです：

.box-text{
font-size: 14px; color: #ffffff; line-height: 22px;  
background-image:url('/images/p-top.png'), url('/images/p-center.png'),url('/images/p-bottom.png'); 
background-position: top center, center center, bottom center; 
background-repeat: no-repeat, repeat-y,no-repeat;}

<div class="box-text">
variable text.............
</div>

私が得ている結果：

期待される結果：

ボックスをスライスして3つの画像を取得しました。1つは上に、もう1つは真ん中の画像で、repeat-yを使用し、3番目の画像はボックスを覆う下の画像です。

ありがとう

Answer 1

背景位置は最初に水平値で指定されるため、次のように切り替える必要があります。

background-position: center top, center center, center bottom;