背景颜色居中的文本一直向右

Posted 2023-02-21

【中文标题】背景颜色居中的文本一直向右

【英文标题】：Centered text with background color all the way right

【发布时间】：2014-09-05 09:23:37

【问题描述】：

我被要求在一些居中的文本上编写一个不寻常的形状背景颜色。

文本应该居中，并且它的背景颜色应该一直延续到父元素的右侧。

这是所需的输出：

我从来没有见过这样的事情，所以我什至不知道从哪里开始。感谢您的帮助！

【问题讨论】：

将您的图片上传到imgur.com 等网站，然后在您的问题中发布链接。有人会为你编辑它。

问题不清楚。 Jsfiddle.net'sfiddle可以说清楚。

图片如下：link

【参考方案1】：

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

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>

尝试改变儿子和父母的颜色。

【参考方案2】：

你可以使用伪元素让黑色背景在右边继续：

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;

【讨论】：

哇，谢谢，这正是我想要的，我也喜欢这个解决方案！