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

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

Answer 2

text-shadow: 2px 2px 10px;

试试文字阴影属性它会让你的文字更显眼

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

text wont get a background over image

html

css

fonts

background