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 张图像，一张是顶部的另一张中间的一张，我已经使用了 repeat-y，第三张图像是底部的图像来覆盖盒子。

谢谢

Answer 1

背景位置首先用水平值指定，所以你应该切换它们：

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