Html 是否可以在css中设置两个位置不同的背景图像

我有两种风格的div，左对齐和右对齐。左侧的BG已对齐到位。我知道要设置多个背景，我会使用这个

background: url(../assests/icons/dialog_left_point.png) left top no-repeat,

url（../assests/icons/dialog_left_bg.png）15px top repeat-y

CSS将图像从左侧对齐X个像素，然后从顶部对齐X个像素，这样可以很好地从左侧对齐背景图像。正如您在示例中所看到的

这是CSS，用于将图像从右侧对齐，以复制右侧的效果

.default .msg_text_right{
    background:url(../assests/icons/dialog_right_point.png) right top no-repeat;
}

正如您所看到的，箭头的图像显示出来，但没有显示其他内容。我尝试添加以下内容：

.default .msg_text_right::after{
    content:'';
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    background-color:red;
    background:url(../assests/icons/dialog_right_bg.png) right top repeat-y;
}

这只会导致箭头显示。我碰巧认为我已经很接近了，但是我不明白为什么没有为：：after标记加载任何内容

以下是我的完整代码，以防它有助于显示容器大小和容器样式的CSS：

.default .msg_text{
    background: url(../assests/icons/dialog_left_point.png) left top no-repeat, url(../assests/icons/dialog_left_bg.png) 15px top repeat-y;
}
.default .msg_text_right{
    background:url(../assests/icons/dialog_right_point.png) right top no-repeat;
}
.default .msg_text_right::after{
    content:'';
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    background-color:red;
    background:url(../assests/icons/dialog_right_bg.png) right top repeat-y;
}
.msg_data li .msg_text, .msg_data li .msg_text_right{
    width:auto;
    max-width:55%;
    min-height:18px;
    height:auto;
    font-size:12px;
    line-height:16px;
    color:#000;
    padding-top:11px;
    padding-bottom:5px;
    font-family:'coertschrift_dikregular';
}
.msg_data li .msg_text{
    float:left;
    left:40px;
    padding-right:5px;
    padding-left:25px;
}
.msg_data li .msg_text_right{
    float:right;
    right:40px;
    padding-right:25px;
    padding-left:5px;
}

HTML/PHP

$d = '';
    $data = '<div id="inner_content">
    <ul class="msg_data default">'; 

$d=''；
$data=
；

0，'err_msg'=>'一些错误消息，'msg'=>$data））； 编辑： 网站上说你可以使用：

background-position:left top, 95% top

您可以调整百分比以获得所需的效果？我不熟悉做这件事的其他方法

但是，您可以通过编程方式执行此操作：

---

使用css3是可能的：

在stackoverflow上发布问题之前，您应该先查看google

---

祝你好运

没有回答如何设置第二幅图像的x像素数量的问题。问题不在于应用多个背景请细化代码块之间的场景（至少我不明白你在追求什么）。请告诉我们您的图像的尺寸和透明度（这可能很重要）。没有问题，请参阅更新。您似乎无法将

px

定位与背景重复一起使用。当我将值更改为

NNpx

（）时，Firefox 27警告CSS格式错误。此外，图像按最上面的图像位于左侧的顺序堆叠。

background-position:left top, 95% top

var test = document.getElementById('test');
var width = test.offsetWidth - 215;

test.setAttribute('style', 'background-position:left top, ' + width + 'px top ');