中心文本与背景颜色一直正确

Question

我被要求在某些居中的文字上编码不寻常的形状背景颜色。

文本应居中，其背景颜色应始终在父元素的右侧继续。

这是所需的输出：

我从未见过这样的事情，所以我甚至不知道从哪里开始。谢谢你的帮助！

Answer 1

您可以使用伪元素使黑色背景继续在右侧：

<强> DEMO

HTML：

<div>
    <span>Some text with</span><br/>
    <span>unusual background</span><br/>
    <span>color</span>
</div>

CSS：

div{
    float:right;
    padding-right:150px;
    text-align:center;
    position:relative;
}

span{
    display:inline-block;
    background:#000;
    color:#fff;
    line-height:1.4em;
    margin:0;
}
span:after{
    content:'';
    position:absolute;
    width:200px;
    height:1.4em;
    right:0;
    background:inherit;
    z-index:-1;
}

Answer 2

我不太了解你的问题，但试着混合这些概念：

HTML：

 <div id="parent">
        <p id="son">Some text with unusual background color</p>
    </div>

JS：

<script type="text/javascript">
    document.getElementsById("parent").style.background="red";
    document.getElementsById("son").style.background="blue";
</script>

尝试更改子颜色和父颜色。