带有背景图像的 CSS Div - 如何允许页面上的 div 扩展？

Question

我不确定如何表达这个主题的问题......抱歉。

我刚刚开始学习CSS。

我有一个带有背景图像的

，并且

中有文本。我读到，选择 em 字体大小是一个不错的选择，因为有些人可能需要在浏览器中使用更大的文本大小。因此使用 em 设置 font-size 可以更好地适应这些类型的用户。

但允许调整文本大小的问题是，在许多情况下，我的

中的文本将超出背景图像的大小，并使页面看起来很糟糕并且设计不好。

有没有办法使用CSS并允许背景图像'匹配'或'扩展'以适应更大的文本大小？

Answer 1

您可以将 div 的 width 设置为 img width，这样它就不会扩展得更宽（超出图像） ）。

当然，放大的文本会迫使 div 沿高度增长。

您还可以将 background-img 设置为重复（如果图像允许），以便当文本展开时，图像会重复。

background-image:url('whatever.png');
background-repeat:repeat-x;  

// x = horizontal, y = vertical

Answer 2

由于您刚开始，您可能需要阅读 http://na.isobar.com/standards/# _pixels_vs_ems 其中他们说：

我们使用 px 测量单位
定义字体大小，因为它提供
对文本的绝对控制。我们意识到
使用 em 单位调整字体大小
曾经很流行，为了容纳
Internet Explorer 6 不调整像素大小
基于文本。然而，所有主要
现在浏览器（包括IE7和IE8）
支持以像素为单位调整文本大小
和/或整页缩放。由于 IE6 是
很大程度上被认为已弃用，像素
尺寸是首选。此外，
首选无单位行高
因为它没有继承
其父级的百分比值
元素，而是基于
字体大小的乘数。

正确：

#selector {
    font-size: 13px;
    line-height: 1.5;  /*  13 * 1.5 = 19.5 ~ Rounds to 20px. */
}

不正确：

/*  Equivalent to 13px font-size and 20px line-height, but only if the browser default text size is 16px. */
#selector {
    font-size: 0.813em;
    line-height: 1.25em;
}