Question

我无法弄清楚为什么顶部图像周围有白色边框。

这是CSS

font {
font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.intro{
background:url(../images/2167265210_bf48820f23_o.jpg);
background-position: center;
height: 600px;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
text-align: center;
font-weight: 100;
}
.intro h1{
font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight:100;
color: #fff;
font-size: 16px;
margin-bottom: 30px;
}

这是HTML

<div class="intro">
<h1>blabla</h1>
<a href="mailto:dingen@dingen.nl" class="button">Neem contact op</a>
</div>

我希望有人能帮助我！

Answer 1

有多种可能性，但如果没有屏幕截图或工作小提琴，我就无法看到精确的问题。

图像本身的白色边框
浏览器围绕图片创建的白色边框
默认浏览器边距
也许来自h1的边距

解决方案1：编辑图像。

解决2,3,4：
使用border:none;表示图片，margin:0表示body和<h1>，如此处。

img { border:none; }                     /* Border around the image */
html, body {margin:0; padding:0;}        /* Default margin from browsers */
h1 {margin:0; padding:0;}                /* Default margin/padding from the h1 */

但是没有印刷品或者Jsfiddle，我没有看到精确的问题。

Answer 2

IE为图像添加边框，而其他浏览器则没有。这是一些奇怪的错误，但这是如何解决它：

.intro{
 background:url(../images/2167265210_bf48820f23_o.jpg);
 background-position: center;
 height: 600px;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
 text-align: center;
 font-weight: 100;

 border:0px;
 outline:0px;
}

为什么我的图像周围有边框？

2 个答案: