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

标签 css html cross-browser background-image

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

我刚刚开始学习 CSS。

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

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

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

最佳答案

您可以将 divwidth 设置为 img width ,这样它就不会扩展得更宽(超出图像)。

当然,放大的文本会迫使 div 增加高度。

您还可以将 background-img 设置为重复(如果图像允许),以便在文本展开时重复图像。

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

// x = horizontal, y = vertical

关于带有背景图片的 CSS Div - 如何允许在页面上扩展 div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6217696/

相关文章:

css - 跨浏览器分词

javascript - 使用 HTML 5 和 CSS 3 创建 "screenshots"?

css - 如何设置<details>和<summary>的样式?

jquery - fancybox 有 html 问题

javascript - 第一个 child 最后一个 child Dom 遍历不起作用

html - 使用图像 Sprite 和 CSS 的文本

html - 哪种字体可以在所有浏览器上呈现 ASCII 艺术?

javascript - 下载 jQuery(从其网站)库以离线运行

css - Firefox 中的输入字段在没有焦点的情况下会发光

html - Chrome 浏览器的不透明度