html - 文本不会在图像上获得背景

Question

嘿，我遇到了一个问题，我无法让文本拥有自己的背景以使其在图像上可读。 我不清楚该怎么做。 请理解这是我制作的第一个网站，刚上线 3 天，所以不要太讨厌呵呵。

这是HTML

<aside class="top-sidebar">
    <article>
    <h2></h2>
    <p>Lorem Ipsum has been the industrys standard dummy text.</p>
    </article>
</aside>

这是CSS

.top-sidebar {
    border-radius: 2px;
   -moz-border-radius: 2px;
     -o-border-radius: 2px;
-webkit-border-radius: 2px;
    padding: 1% 5%;
    margin-top: 2px;
    margin-bottom: 2px;
    margin-left: 0.5%;
    width: 29.5%;
    height: 160px;
    float: left;
    background: #fff url(Images/socialnight.jpg) no-repeat ;
    background-size: 100% 100% ;
    background-position: 0% 0%;


}


.top-sidebar article {
position: relative;
    top: 30px;
    right: 0px;
        left: 45%;
        width: 60%;
        font-size: 90%
}


p span { 
   color: white; 
   font: bold 24px/45px Helvetica, Sans-Serif; 
   letter-spacing: -1px;  
   background: rgb(0, 0, 0); /* fallback color */
   background: rgba(0, 0, 0, 0.7);
   padding: 10px; 
}

Answer 1

问题是您的 CSS 以 p span 为目标(这意味着 span 元素包含在 p 标签中)。您的 HTML 中没有任何 span 元素，因此要么添加 span 元素，要么从您的 CSS 中删除它，以便您只定位 p。

像这样:

p { 
   color: white; 
   font: bold 24px/45px Helvetica, Sans-Serif; 
   letter-spacing: -1px;  
   background: rgb(0, 0, 0); /* fallback color */
   background: rgba(0, 0, 0, 0.7);
   padding: 10px; 
}

Here is a working example