在div附近的不受欢迎的微弱的概述与背景图象

Question

我在背景图片上覆盖了一个包含单个<div>标记的简单<p>。但是，如附图中所示，有一个非常微弱的＆＃34;轮廓＆＃34;围绕这个我无法删除的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

删除

lmiterm([YRL 2 2 GAMMA2I],1,1);

而是应用body标签或容器div Ex。

的背景

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

如果您将背景图像应用于通用选择器，那么它将应用于每个元素。这就是您获得该叠加层的原因。

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>