“粘贴”HTML到图像

这是我的困境，我有一个背景图像，它有一个酒吧。我用“粘贴”HTML到图像

body { 
    background-image: url("foo"); 
    background-size: 100%; 
}

我也有一些HTML，我想成为内这条适合的背景图像。问题是，当用户调整浏览器窗口大小时，图像会根据它调整（这是我想要的），但是html保持在同一个位置，所以它会被放在酒吧外面。有没有一种方法可以使我的html可调整大小像图像，以便它看起来像html是粘在图像上的？有人可以给我一个CSS剪辑吗？

2012-07-28 Harrison

这个“酒吧”有多复杂，难道你不能创建一个div来模仿它吗？ – 2012-07-28 20:48:22

制作它自己的div栏，并给它里面的元素设置一个相对的高度/宽度，栏宽度为100％，这样当它调整大小时，图片和内容就会改变大小。你可以用margin来做同样的事情。 – Charlie 2012-07-28 20:50:17

请为您的问题创建一个测试用例。 – 2012-07-28 20:53:43

这个问题说明了使用图像指导布局的最大问题。不幸的是，哈里森，你没有解决方案，可以让你在不改变图像的情况下在浏览器或浏览器大小上做你想做的事情。如果可以的话，请发布它应该是什么样子的屏幕截图，以便我们可以帮助您修改背景以提高其兼容性。

同时，我建议您从图像中删除条形图并继续使用图像作为背景。然后使用display: block;的div并使用该栏作为背景。

2012-07-28 20:58:30

...不是div的天生“块”风格？ – Jared 2012-07-28 21:09:20

是的，但是因为其他帖子之一表示他应该将宽度更改为100％，所以我认为我确认他已将div设置为'display：block'，以防他重写默认显示样式 – 2012-07-28 21:26:09

如果您希望条的大小可调整，请将其高度和宽度设置为容器高度和宽度的百分比数量。当然，当窗口大小减小时，HTML会溢出，没有补救办法。

2012-07-28 21:21:10 SexyBeast

Is那么我可以用不同的方式做到这一点？ – Harrison 2012-07-28 21:23:00

不是。也许有方法可以通过Javascript来检测浏览器的大小调整，通过这种方式，您可以同时调整字体大小，以便内容不会溢出，但这会打破优雅的退化，因为禁用Javascript的用户无法获得优势。再加上它会很复杂，不知道它是否值得。 – SexyBeast 2012-07-28 21:26:10

如何在不使用浏览器大小百分比的情况下缩小背景？ – Harrison 2012-07-28 21:44:14

回答