带有背景图片的 div 周围出现不需要的模糊轮廓

Question

我在背景图片上叠加了一个包含单个 <p> 标签的简单 <div>。但是，如附图所示，这个 div 周围有一个非常微弱的 "outline"，我无法将其删除。我试过使用 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 class 指的是 <p> 内的标签，否则为空，classless <div>。

如何去除这个模糊的轮廓？

Answer 1

删除

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

改为为正文标签或容器应用背景 div 例如

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>

带有背景图片的 div 周围出现不需要的模糊轮廓

Undesired faint outline around div with background image

html

css

background-image