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

Question

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

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

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

有任何想法吗？？？？

我已经坚持了几个小时了，它开始让我烦恼。

提前谢谢了！

Answer 1

尝试用百分比定位你的 div

left:50%;
right:50%;

Answer 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 及以下版本）都支持此功能。