html - 弹出窗口的可缩放背景图像。网页格式, CSS

Question

我在 html 和 css 中遇到问题， 我为我的弹出窗口使用了一个 bg 图像，其大小为 500px 宽度和 400px 高度； 里面有一个可滚动的文本。但问题是，如果我减小浏览器的大小，它就会变形。如果我可以根据浏览器大小使其可缩放背景并根据该文本，请帮助我。

谢谢 马友德

Answer 1

如果不使用某些 JS 将背景定义为 CSS 的一部分，则无法缩放背景。在下面的示例中，背景的黑色部分会随浏览器窗口缩放/调整大小，但图像不会； img 会很高兴地坐在@top:0, left:0, render 1:1 然后 mock 你。

    /* Black will scale, images does not */
    #someDiv {
    display:block;
    width:100%;
    height:100%;
    background:#000 url(someImage.jpg) 0 0 no-repeat;
    }

如果出于任何原因需要在 CSS 中包含背景图片，请阅读此 http://css-tricks.com/perfect-full-page-background-image/了解如何使用 JS 管理缩放 CSS 背景

或

如果您将背景定义为img，那么您就有更好的机会并且您甚至不需要使用 JS(尽管如果您愿意，您可能应该这样做)保持比率/比例)。