我的背景图片在底部被截断

Question

我的网站必须响应,我应该建立它"移动优先".这是一个单页网站,每个部分都被一个svg图像分割.

到目前为止,我已经通过使用它完美地调整了宽度,background-size:cover;但是图像底部的一小部分被切断了.我已经尝试调整高度(自动,100%,随机像素值),但似乎没有做任何事情:/任何想法？

#breakpink{
    background-image: url(../images/break_pink.svg);
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    text-indent: -9999px;
}

完整代码:

http://jsfiddle.net/duyBE/

Answer 1

同样的问题发生在我身上.此问题的解决方案已发布在此页面上接受的答案中:CSS:全尺寸背景图像

解决方案是使用:background-size:100%100%

但是有一个缺点,就是当你缩小背景和内容时,"身体"背景出现在底部!

Answer 2

使用“背景大小：包含”而不是“背景大小：封面”，

1 背景尺寸：封面

属性值“cover”将使图像覆盖可用空间，如果图像较小，则将其放大以覆盖可用空间，如果图像较大，则将缩小以覆盖可用空间，无论是哪种情况，图像可能会被裁剪以填充可用空间。

优点：它将覆盖整个可用空间。缺点：图像可能会被裁剪。

2 背景大小：包含

“包含”将使图像放大或缩小以适应可用空间。优点：显示完整图像。缺点：图像可能看起来很拉伸。有时您会在图像周围看到空白区域。

Answer 3

在元素底部添加边距：

#breakpink{
    background-image: url(../images/break_pink.svg);
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    text-indent: -9999px;
    margin-bottom:10px;
}