0

我正在创建一个单页滚动站点，我想将图像用作主页的背景。我已经尝试了几种方法，但我似乎无法获得图像前面的内容，只能在它下面。

<meta charset="utf-8">
<style>
body {  
    background: url(img/bg.jpg) no-repeat;
    background-size: 100%;
}
</style>

<title>Digital Portfolio</title>

<meta name="description" content="Portfolio of my work">
<meta name="keywords" content="Sara Cook, portfolio, digital media">
<meta name="author" content="Sara Cook">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<link href="img/favicon.ico" rel="shortcuticon"/>
<link href="img/apple-touch-icon.png" rel="apple-touch-icon"/>
<link href="img/apple-touch-icon-72x72.png" rel="apple-touch-icon"sizes="72x72"/>
<link href="img/apple-touch-icon-114x114.png" rel="apple-touch-icon"sizes="114x114"/>
<link href="img/apple-touch-icon-144x144.png" rel="apple-touch-icon"sizes="144x144"/>

<link rel="stylesheet" href="css/base.css"/>
<link rel="stylesheet" href="css/skeleton.css"/>
<link rel="stylesheet" href="css/custom-style.css"/>
</head>
<body>
4

2 回答 2

1

将图像设置为html元素的背景。完整的解释在这里。

演示链接：http: //jsfiddle.net/BSXgb/2/

代码：

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Digital Portfolio</title>

    <meta name="description" content="Portfolio of my work">
    <meta name="keywords" content="Sara Cook, portfolio, digital media">
    <meta name="author" content="Sara Cook">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

    <link href="img/favicon.ico" rel="shortcuticon"/>
    <link href="img/apple-touch-icon.png" rel="apple-touch-icon"/>
    <link href="img/apple-touch-icon-72x72.png" rel="apple-touch-icon"sizes="72x72"/>
    <link href="img/apple-touch-icon-114x114.png" rel="apple-touch-icon"sizes="114x114"/>
    <link href="img/apple-touch-icon-144x144.png" rel="apple-touch-icon"sizes="144x144"/>

    <link rel="stylesheet" href="css/base.css"/>
    <link rel="stylesheet" href="css/skeleton.css"/>
    <link rel="stylesheet" href="css/custom-style.css"/>
  </head>
  <body>
    <div class="container">
        <header class="sixteen columns clearfix">
            <div class="four columns alpha">
                <h1>Sara Cook</h1>
            </div>

            <div class="offset-by-six columns omega">
                <ul id="menu">
                    <li><a href="#home_page">Home</a></li>
                    <li><a href="#about_page">About</a></li>
                    <li><a href="#graphic_page">Portfolio</a></li>
                    <li><a href="#photography_page">Contact</a></li>
                </ul>
            </div>
        </header>
        <article id="pages">
          <section id="home_page" class="sixteen columns clearfix">
            <div class="offset-by-ten columns">
              <p> From Kent, Uk. My name is Sara Cook and I'm</p>
              <p> a student at the University of Kent, Studying</p>
              <p> Multimedia Technology and Design.</p>
              <p> Please browse my portfolio and feel free to contact</p>
              <p> me. I hope you enjoy my site.</p>
            </div>
          </section>

          <section id="about_page"></section>
          <section id="portfolio_page"></section>
          <section id="contact_page"></section>
        </article>
    </div>
  </body>
</html>

CSS

html {
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
于 2013-11-04T20:38:22.810 回答
1

在您的“head”标签中，放置以下内容：

<style>
    body {  
        background: url(bgimage.jpg) no-repeat;
        background-size: 100%;
    }
</style>

将 bgimage.jpg 替换为图像文件的路径。

于 2013-11-04T20:39:24.300 回答