不想要的背景圖像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>