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

Posted 2023-03-05

【中文标题】我的背景图片在底部被截断

【英文标题】：My background image get cut off at the bottom

【发布时间】：2014-01-01 04:14:21

【问题描述】：

我的网站必须具有响应能力，并且我应该以“移动优先”来构建它。 这是一个单页网站，每个部分都由 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/

【问题讨论】：

text-indent: -9999px; ?你想做什么？

text-indent: -9999px，以及其他样式，例如边距，是一种欺骗搜索引擎认为您拥有更有价值的内容的方法。无论是否相关，获得更好的 SEO 都是一种技巧，但如果引擎发现或有人报告它，可能会失去您网站的可信度。

您不应该使用-9999px，因为它会由于绘制一个 9999px 的框而导致性能不佳。如果您想隐藏文本，请使用：text-indent: 100%; white-space: nowrap; overflow: hidden;

完整版代码好吗？ #breakpink 中的最后一个标签是否是 <p> 标签（可能带有一组 line-height）？此问题可能是由<p> 标签的margin 和/或其line-height

引起的

最好把你的问题代码贴在jsfidlle中，分享一下更容易回答..！

【参考方案1】：

同样的问题发生在我身上。此页面上已接受的答案中发布了此问题的解决方案：CSS: Full Size background image

解决方案是使用：背景大小：100% 100%

但是有个缺点，就是当你把背景和内容一起缩小的时候，底部会出现“body”背景！

【讨论】：

我认为，如果您能够对最小图像高度做出假设，则可以克服这个“缺点”。例如，min-height: 750px; 将强制高度永远不会低于该高度，因此当您缩小身体背景时不会切断图像。

@ecoe 我有一个相关的问题，设置最小高度为我解决了这个问题。谢谢。

【参考方案2】：

使用“背景尺寸：包含”而不是“背景尺寸：封面”，

1 背景尺寸：封面

属性值“cover”将使图像覆盖可用空间，如果图像小则放大以覆盖可用空间，如果图像大则缩小以覆盖可用空间，在任何一种情况下，都可能会裁剪图像以填充可用空间。

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

2 背景尺寸：包含

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

【讨论】：

background-size: cover; display: inline-table; 为我工作

【参考方案3】：

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;

这可能会解决您的问题

【讨论】：

据我所知，您在no-repeat 之前缺少;

【参考方案4】：

我遇到了类似的问题。我添加了一个 padding-bottom: 10px;它对我有用。

【参考方案5】：

在元素底部添加边距：

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

【参考方案6】：

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

解决了

背景尺寸：包含；

【参考方案7】：

我遇到了类似的问题。原来，图像文件以某种奇怪的方式损坏了。在文件系统中打开图像有效，图像正常，但在浏览器中产生了此错误。我删除了图像文件并再次下载它，图像以 css 规则正确显示。

【参考方案8】：

添加最小高度属性

#breakpink

// other codes are here 

min-height: 150vh;

// to see area of the image 
border: 2px solid red;

【参考方案9】：

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;

【讨论】：

请在您的答案中添加一些文字，描述为什么这会回答问题。