logo标签列表

背景图片无法填满整个div大小

css
3
的CSS如下应用：
#header{
    background-size: 100%;
    background: url('../img/header.png');
    width: 100%;
    height: 200px;
    border-bottom: 10px solid #b2d234;
}

如图所示picture，底部边框适合整个宽度，但背景图像既不填充整个宽度，也不填充高度，即使没有应用填充或边距。

非常感谢任何指导。

更新：

我已经缩小了视图，因此问题很容易看到。 问题是背景图像被重复，每个重复之间有小空格。 我尝试了无重复选项，但然后我只获得了一次背景，并且它不能填满整个屏幕。

请查看图片：

enter image description here

1个回答
4

使用：

background-size: cover;

更新了CSS。

#header{
    background-size: cover;
    background: url('../img/header.png');
    width: 100%;
    height: 200px;
    border-bottom: 10px solid #b2d234;
}
1
另外，如果您需要背景略微溢出，请将其设置为background-size:105％并添加background-position:center; - 3066d0
实际上，使用背景大小覆盖并没有改变任何东西。事实上，如果我在一个更大的屏幕上测试它，右侧甚至会出现相同的溢出。而我需要的是图片覆盖整个宽度，并且高度从顶部开始200像素。 - Domas
background-position: center; 刚刚移除了顶部的出血，同时将两侧的出血缩小了，但是离左右两侧仍然有约7像素。 - Domas
我已经编辑了问题并添加了一张截图，现在可能更清晰了。 - Domas
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接