1个背景尺寸：封面

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: Full Size background image

解决方案是使用：background-size：100％100％

但是有一个缺点，就是当你缩小背景和内容时，“身体”背景出现在底部！

Answer 2

html { 
    background: url(../images/break_pink.svg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

这可能会解决您的问题

Answer 3

我遇到了类似的问题。我添加了一个填充底部：10px;它对我有用。

Answer 4

在元素的底部添加一个边距：

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

Answer 5

有类似的问题，我的标题图像的底部被切断了。通过使用

解决了它

background-size：contains;

Answer 6

我有类似的问题。事实证明，图像文件以某种奇怪的方式被破坏了。打开文件系统中的图像工作，图像没问题，但它在浏览器中产生了这个错误。我删除了图像文件并再次下载，图像随css规则适当显示。

Answer 7

使用“背景尺寸：包含”代替“背景尺寸：封面”，

1个背景尺寸：封面

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

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

2 background-size：包含

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

Answer 8

body{
    margin: 0;
    padding: 0;
    background: url(image.jpg);
    background-size: auto;
    background-size: cover;
    height: 100%;
    text-indent: -9999px;
    margin-bottom:10px;
    background-position: center;
    font-family: sans-serif;
}

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

8 个答案:

1个背景尺寸：封面

2 background-size：包含