如何将文本添加到适合浏览器大小的背景图像答案

【问题标题】：How can I add text to a background image that fits the size of a browser如何将文本添加到适合浏览器大小的背景图像
【发布时间】：2013-09-17 20:23:02
【问题描述】：

我被要求为我的公司制作一个简单的页面，基本上它有公司徽标作为背景图片。当您更改浏览器的大小时，图像会自行调整大小。我已经使用 HTML 和 CSS 做到了这一点。

但是，我现在需要在徽标上方和右侧放置一些文本，如果浏览器大小发生变化，这些文本也需要移动以与背景图像保持原位。

我该怎么做？我可以使用 DIV 标签将文本放置在屏幕上的某些位置没有问题，但显然一旦更改浏览器大小，则文本相对于背景图像不在位置。

有什么想法吗？？？？

我已经坚持了好几个小时了，这让我很恼火。

非常感谢！

【问题讨论】：

【解决方案1】：

尝试使用百分比定位您的 div

left:50%;
right:50%;

【讨论】：

【解决方案2】：

将 div 水平居中：

div.logo_text
{
    width  : 5 em;
    margin : 0 auto;
}

设定宽度是必要的。

您也可以这样做，它还允许偏离中心定位，以及垂直对齐：

body
{
    min-height  : 100%;
}

div.logo_text
{
    position    : fixed; 
    left        : 33%;
    top         : 33%;
}

将其放置在屏幕顶部的 33% 和左侧的 33% 处。如果您想坚持徽标的尺寸，您还需要使文本的大小相对于屏幕的大小。

您可以使用具有 DIV 宽度值一半的负边距来使某个位置居中。

div.logo_text
{
    position    : fixed; 
    left        : 33%;
    top         : 33%;
    width       : 6em;
    margin-left : -3em;
}

我认为您不会成功地以这种方式完美定位它。您可以在 SVG 中查看缩放时缩放的图像。并非所有浏览器（阅读 IE9 及以下版本）都支持此功能。

【讨论】：