Question

如何确保某些内容始终适合网页的特定区域？

作为一个例子，我希望句子“Fit this inside”出现在背景图像中。这是我的test.html文件：

<!DOCTYPE html>
<html lang="en">
    <link href="test.css" rel="stylesheet" type="text/css">
    <body>Fit this inside</body>
</html>

这是我的test.css文件：

body
{
    background-image: url('bg_img.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    background-size:100% 68%;
    overflow: scroll;
}

这导致文本“内部适合”出现在页面的最顶部，而不是出现在背景图像区域内。

这样做的正确方法是什么？

JSFiddle： http://jsfiddle.net/u3TAF/

Answer 1

看看我的评论更高。您已将背景图像设置为68％高度。将文本设置为具有相同属性的容器。

<!DOCTYPE html>
<html lang="en">
    <head>
        <title> Bla! </title>
        <style type='text/css'>
            body
            {
                background-image: url('image.png');
                background-repeat: no-repeat;
                background-position: center center;
                background-attachment: fixed;
                background-size:100% 68%;
            }
            div.container {
                position:absolute;
                top:16%;
                height: 68%;
                left: 0%;
                overflow:auto;
            }        
        </style>
    </head>
    <body>
        <div class='container'>
            Now it's fit!
        </div>
    </body>
</html>

Answer 2

我认为最好的选择是将文本放在DIV中，然后将样式应用于该元素。在某处：

<html>
<head>
<style type="text/css">
#test{
    background-image: url('bg_img.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    background-size:100% 68%;
    overflow: scroll;
    }   
</style>
</head>
<body>
<div id="test">
Fit This Inside
</div>
</body>
</html>

Answer 3

应该将背景图像赋予父元素。在您的情况下，在CSS中，将背景图像属性附加到<html>元素。因此，此图片将作为所有此页面内容的背景。

如果这就是你的目标，那么：

    html{
         background: url('bg_img.png') no-repeat center center fixed;
    }

如何在背景图像中拟合内容

3 个答案: