Question

我有一个应用https://bootstrapp3.herokuapp.com/，当我添加文字时，背景图片会改变大小。在浏览器上使用inspect元素函数后，似乎是影响background-size属性的font-size属性，因为当我使用inspect元素取消选中与font-size相关的框时，background-size返回到正常尺寸。为什么背景尺寸会发生变化？比较应用程序中的以下两个页面：

没有文字和字体大小： https://bootstrapp3.herokuapp.com/pages/page1

由于字体大小而导致背景大小更改： https://bootstrapp3.herokuapp.com/pages/consulta

请注意，页面之间的唯一区别是视图中的内容。两个页面都从应用程序布局继承。

css的背景大小：

body {
    background-image:image-url('gotita.png');
    background-size: cover;
    background-repeat: repeat;
    background-position: 0 51px;
}

font-size element：

p {
  font-family: 'Architects Daughter';
  font-size: 20px;
}

Answer 1

您已设置背景属性以涵盖。如果要使其独立，则将背景应用于具有您要设置的大小的空div。然后在另一个div中添加文本，使其位置为绝对值。

现在，更改字体大小不会影响背景图像。

Answer 2

这是因为你正在使用：

background-size: cover;

在body元素上。身体的高度相对于所有子元素。因此，因此，背景图像必须适应填充高度。

要在不依赖于内容的所有页面上使背景图像相同，您可以从body标签中删除背景图像，并在固定位置的body标签内创建div，如：

background-image: url(/assets/gotita-7c57f01….png);
background-size: cover;
background-repeat: repeat;
background-position: 0 51px;
position: fixed;

Answer 3

查看您指定的background-size属性。该属性可以描述如下：

contain：“将图像尽可能大地缩放而不裁剪或拉伸图像。”
cover：“在不拉伸图像的情况下尽可能大地缩放图像。如果图像的比例与元素不同，则会垂直或水平裁剪，以便不留空的空间。”

来源：MDN Web Docs

为什么font-size CSS属性会影响我的rails应用程序中的background-size属性？

3 个答案: