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

Question

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

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

url(../assets/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">'; 

    for($x = 0; $x < 10; $x++){
        $data .= '
        <li>
            <div class="pp'.$d.'"><img src="assests/profile.png" /></div>
            <div class="msg_text'.$d.'">Messge text from user Messge text from user Messge text from user Messge text from user Messge text from user Messge text from user Messge text from user Messge text from user Messge text from user Messge text from user Messge text from user Messge text from user Messge text from user Messge text from user Messge text from user Messge text from user </div>
            <div style="clear:both"></div>
        </li>
       ';
       if($d == '_right'){
           $d = '';
       }else{
           $d = '_right';
       }
    }
    $data .= '</ul></div>';
    die(json_encode(array('err' => 0, 'err_msg' => 'Some error message', 'msg' => $data)));

Answer 1

编辑：

嗯，网站说你可以使用：

background-position:left top, 95% top

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

但是，您可以通过编程方式执行此操作：http://jsfiddle.net/fW9ZA/

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

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

---

使用 css3 是可能的：

http://www.css3.info/preview/multiple-backgrounds/

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

祝你好运！