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

我不确定如何说出这个话题的问题......抱歉。带有背景图像的CSS Div - 如何允许在页面上扩展div？

我刚刚开始学习CSS。

我有一个<div>与背景图像，并有<div>内的文本。我读到em选择字体大小是一个不错的选择，因为有些人在浏览器中可能需要更大的文本大小。所以用em设置字体大小可以更好地适应这些类型的用户。

但是，允许文本大小调整的问题在于，在很多情况下，我的<div>中的文本将超出背景图像的大小，并使页面看起来很糟糕，设计也很糟糕。

有没有办法使用CSS，并允许背景图像“匹配”或“扩大”以适应较大的文本大小的方法吗？

2011-06-02 katura

对于我的特殊情况，我才发现，如果我切片背景图像成3幅独立的图像（上，中，下），然后将它们设置为3点独立div的背景（对比1 div与1背景），我可以把内容放入中间div，'that'div然后'扩大'以适应更大的文本。注意：字体大小可以是“px”，以留出设计师的大小 - 或“px”来容纳用户。它适用于两种方式。 – katura 2011-06-02 20:58:02

您可以在div的width设置为imgwidth，使其永远不会扩展更广泛的（超出图像）。

当然，放大的文本将迫使div增长高度明智。

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

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

// x = horizontal, y = vertical

来源

2011-06-02 17:24:51

你给了我一个想法，我试了一下......我只是不得不将我的图片分成3片，然后使用3格而不是1格。文本内容放在中间div和背景中 - 重复它允许div“增长”以适应内容。 – katura 2011-06-02 20:59:55

@katura很好的解决方案！很高兴它的工作。 – 2011-06-02 22:51:33

既然你开始了，你可能需要阅读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; 
}

来源

2011-06-02 17:14:37

谢谢你提供的信息...我很感激。那么，如果我使用'px'而不是'em'，我明白我可以更好地控制文本大小（它正在被修复），并且我可以通过缩放功能。因此，我不必关心在div中我的背景图像边界以外的文字。这一切听起来不错吗？我只是想确定我正在学习正确的方法... – katura 2011-06-02 17:32:39

这听起来不错。你可以在[http://jsFiddle.net]测试它，并证明你的具体需求的方式或其他。 – 2011-06-02 17:42:04

我可能是错的，但我认为使用像素（仍然）的问题在于 - 尽管可以通过调整浏览器控件来调整它们的大小 - 但仍然会迫使访问者对使用页面进行调整。如果你用'em'或者'％'设置'font'，浏览器将会访问访问者的设置并应用它们。但是'px'按照开发人员的需要进行渲染......让访问者手动进行更改。 – 2011-06-02 19:50:57

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

回答

相关问题