Question

下午好下午！我需要一些CSS帮助。

我有一个背景图片，我希望以网站的正文为中心。我希望它看起来不错，不会太夸张或太小。这是我到目前为止所做的尝试。

body{
    background-color: #1e1e1e;
    padding: 20px 0 20px 0;
}

#container{
    max-width: 780px;
    background: url('/img/background2.png') #1e1e1e no-repeat 0px 12px fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    color: #d1d1d1;
}

它几乎可以工作。当浏览器窗口全屏时，背景图像似乎向左拉。当浏览器窗口较小时，它非常适合。在像我的MotoX这样的手机上使用chorme它的爆炸真的很大而不是看起来合理缩放。

background-size: contain;离我想要的结果更远。

这里是ref的HTML。我也把它扔到我的服务器上http://jasontolhurst.com

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Jason Tolhurst</title>
    </head>

    <body>
        <div id="container" class="container-fluid">
            <header class="header clearfix">
                <div class="container-fluid">
                    <ul class="list-inline pull-right">
                        <li>
                            <a target="_blank" href="http://stackoverflow.com/users/4490365/squeegy"><img style="max-width:23px" src="/img/stackoverflow.png" /></a>
                        </li>
                        <li>
                            <a target="_blank" href="https://github.com/squeegy06"><img style="max-width:23px" src="/img/github.png" /></a>
                        </li>
                        <li>
                            <a target="_blank" href="https://www.linkedin.com/pub/jason-tolhurst/91/9b/775"><img style="max-width:23px" src="/img/linkedin.png" /></a>
                        </li>
                    </ul>
                </div>
            </header>
            <div class="container-fluid">
                <div class="jumbotron">
                    <div class="container-fluid">
                        <h1>Jason Tolhurst</h1>
                        <p class="lead">Professional PHP developer and programming enthusiast</p>
                    </div>
                </div>
            </div>
            <div id="content" class="container-fluid">
                <div id="about-me" class="col-md-12">
                    <h2>About Me</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </div>
                <div id="projects" class="col-md-12">
                    <h2>Projects</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </div>
                <div id="contact" class="col-md-12">
                    <h2>Contact Me</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </div>
            </div>
            <footer>
                <link href='http://fonts.googleapis.com/css?family=Source+Code+Pro|Droid+Serif|Montserrat' rel='stylesheet' type='text/css'>
                <link rel="stylesheet" href="/css/bootstrap.min.css">
                <link rel="stylesheet" href="/css/bootstrap-theme.min.css">
                <link rel="stylesheet" href="/css/screen.css">

                <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
                <script src="/js/bootstrap.min.js"></script>        
            </footer>
        </div>
    </body>
</html>

谢谢！

Answer 1

使用background-position告诉background-image 将作为背景。在您的情况下，如果您希望背景图像直接位于其应用的元素的中心，您需要50% 50%。其中，0% 0%将图像相对于其左上角的元素定位，而100% 100%将图像定位在其元素的右下角。

所以background-position: 50% 50%;

值得注意的是，使用media-query将允许您在不同的浏览器大小上应用不同的CSS显示属性/值。这将允许您将某个CSS属性/值微调到某个显示大小。

了解更多：

background-position

https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

和

media-query

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

CSS响应背景图像

1 个答案: