Question

我有一个新手问题：我需要将图像作为网站的背景图像。它需要显示整个图像。用户需要选择向下滚动。这是我写的，它确实显示滚动条但它不滚动。图像非常大。

    <html>
<head>
    <title>Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style>
        body {
            background-image: url("OPL2013.gif"); /* Change Image URL */
            background-repeat: no-repeat; /* Keep it */
            background-position: 50% 0; /* position to center */
            background-attachment: fixed; /* For Scrolling bars */
            height: 100%;
            min-height:100%;

        }
    </style>
</head>
<body dir="rtl" align="center">
</body>
</html>

**图像为970X1200像素

Answer 1

通过设置背景图像，您只需将图像应用于可见区域，由可应用的元素决定。

因此，您可能希望将图像作为img元素添加到body中，或者将body本身的尺寸明确设置为图像的尺寸。< / p>

滚动条未显示的原因是它们由元素的溢出决定，元素的溢出由其内容决定。 background属性不表示传播到元素的内容，因此它不会影响溢出，从而导致滚动条出现。这就是为什么您需要更改元素的尺寸以在其父元素上创建溢出，或者将图像应用为src的{{1}}来执行相同操作。

带滚动条的背景图像

1 个答案: