我的文字背后的背景到了页面的最后，而不是停止

Question

我想在我的文字后面添加一种透明，模糊的背景，以便我的文字所在的图像仍然可见。有点像......

但我的问题是，即使透明背景按计划显示，它也会“永远”向右移动，直到它到达页面边缘，而不是停止文本结束的位置。有什么想法我可以解决这个问题吗？

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);
}

Answer 1

你的风格中有width: 100%;。将其删除并制作width: auto;。那个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会有所帮助。