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;

尝试使用文字阴影属性，它会使文字更加醒目

文本不会获得图像背景

2 个答案: