Question

我有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像素，这样可以很好地对齐左边的背景图像。正如您在示例中看到的那样。

left align working

这是用于对齐图像形式右侧的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">';

＆lt; ---- div有两个css样式，一个用于形状，一个用于式

    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上发布问题之前，您应先检查谷歌。

祝你好运！

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

1 个答案:

编辑：