Html 我的文字后面的背景会一直延伸到页面的最后，而不是停止

我想在我的文本后面添加一种透明、模糊的背景，这样我的文本所在的图像仍然可以看到。有点像这样

但我的问题是，即使透明背景按计划显示，它仍然“永远”向右移动，直到到达页面边缘，而不是在文本结束处停止。有没有想过我该怎么解决这个问题

CSS

.text {
    position: absolute;
    z-index: 100;
    color: white;
    width: 100%;
    top: 300px;
    left: 10px;
    background-color: rgb(0, 0, 0); 
    background-color: rgba(0, 0, 0, 0.7);
}

---

你有

宽度：100%在您的样式中。将其移除并使其
宽度：自动。这是CSS而不是HTML

.text {
    position: absolute;
    z-index: 100;
    color: white;
    width: auto; /* Epic Miss */
    top: 300px;
    left: 10px;
    background-color: rgb(0, 0, 0); 
    background-color: rgba(0, 0, 0, 0.7);
    display: inline;
}

同时给出
display:inline
也会有所帮助。
Haha，写问题与实际阅读自己的8行CSS所花费的时间：D@Shomz为什么？哪一行很长？我的意思是OP-花了很多时间来很好地设置问题的格式，但没有阅读他自己的几行代码。：）我对你的答案投了赞成票。呃。。。呵呵。。。我还是不明白。我把OP的问题格式化了，而且回答得很快。你是那个意思吗<代码>：P
对不起，我想我现在有点笨<代码>：（

一天结束！