不想要的背景图像div晕

Question

我覆盖了一个简单的<div>在背景图像上包含一个<p>标签。但是，如附图所示，这个div周围有一个非常微弱的“轮廓”，我无法删除。我尝试过使用outline-style:none;属性，但这并没有改变任何东西。下面是相关的CSS：

.titleText { 
    text-align:center; 
    font-family:Georgia; 
    font-size:30px; 
} 

* { 
    background-image:url(https://static.pexels.com/photos/23049/pexels-photo.jpg); 
    background-repeat:no-repeat; 
} 

的.titleText类是指<p>标签内的其他空，无阶级<div>。

我该如何去除这个微弱的轮廓？

Answer 1

删除

* { 
    background-image:url(https://static.pexels.com/photos/23049/pexels-photo.jpg); 
    background-repeat:no-repeat; 
} 

相反申请背景body标签或容器息除净。

body{ 
background-image:url(https://static.pexels.com/photos/23049/pexels-photo.jpg); 
     background-repeat:no-repeat; 
} 

如果您申请的背景图片为通用选择那么它会在每个element.That的应用，为什么你都拿到复盖。

Answer 2

body { 
 
margin: 0; 
 
padding: 0; 
 
} 
 

 
* { 
 
-webkit-box-sizing: border-box; 
 
-moz-box-sizing: border-box; 
 
box-sizing: border-box; 
 
} 
 

 
.titleText { 
 
    text-align:center; 
 
    font-family:Georgia; 
 
    font-size:30px; 
 
} 
 

 
.background-div { 
 
height: 400px; 
 
background-size: cover; 
 
    background-image:url(https://static.pexels.com/photos/23049/pexels-photo.jpg); 
 
    background-repeat:no-repeat; 
 
} 
 
You have a global selector for your background image which you should not do as this will apply it to every element on your page. 
 

 
Instead, apply the bg to the containing div, then use border box model (and I recommend some sort of reset too).

<div class="background-div"> 
 
<p class="titleText">Some text here</p> 
 
</div>