Question

我想创建类似的内容：Page

在一些帮助下，结果是：MyPage。我不希望背景图像是100％。我只想要真正的高。怎么能改变那个？我尝试了很多，但它不会工作：/

这是我的标记：

<!DOCTYPE html>
<html>    
    <head>
        <title></title>
        <link rel="stylesheet" href="index.css">
        <!-- Open Sans -->
        <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    </head>
    <body>
        <nav>
            <ul>
                <li><a href="#">Link 1</a>
                </li>
                <li><a href="#">Link 1</a>
                </li>
                <li><a href="#">Link 1</a>
                </li>
            </ul>
        </nav>
        <div class="content">
             <h1></h1>
        </div>
    </body>
</html>

演示

＆＃13;

* {
  font-family: "Open Sans";
  margin: 0px;
  padding: 0px;
  font-size: 18px;
}
html {
  height: 100%;
}
body {
  height: 100%;
  background: url(https://c1.staticflickr.com/9/8226/8557105873_a82c51f03f_z.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
nav {
  background: url("images/line-header.png") repeat-x scroll center bottom #4A525A;
  padding: 15px;
  position: fixed;
  top: 0px;
  width: 100%;
}
nav > ul {
  margin: 0px;
  padding: 0px;
  text-align: center;
}
nav ul > li {
  margin-left: 25px;
  display: inline-block;
  list-style-type: none;
}
nav ul li > a {
  display: block;
  text-decoration: none;
  color: black;
  color: #697683;
  transition: color 0.5s;
}
nav ul li > a:hover {
  color: #FFF;
}
.content {
  height: 1000px;
  margin-top: 500px;
  background-color: orange;
}

＆＃13;

<!-- Open Sans -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

<nav>
  <ul>
    <li><a href="#">Link 1</a>
    </li>
    <li><a href="#">Link 1</a>
    </li>
    <li><a href="#">Link 1</a>
    </li>
  </ul>
</nav>

<div class="content">
  <h1></h1>
</div>

＆＃13;

Answer 1

只需将margin-top上的.content设置为100%而不是500px

.content{
  height: 1000px;
  margin-top: 500px; <---- change to 100%
  background-color: orange;
}

FIDDLE

Answer 2

我不是100％肯定你的要求，但如果你的高意味着身高，也许你应该使用contain代替cover的{{1}}。

background-size

Answer 3

你所链接的lol-coaching页面根本没有缩放，他们还cropped their image只显示他们需要的东西。

lol-coaching header

他们也没有将背景附加到身体上，它把它放在一个单独的标题div中。

 .wsite-background {
      background-image: url('//cdn1.editmysite.com/uploads/3/8/9/4/38945355/background-images/748028443.png') !important;
      background-repeat: no-repeat !important;
      background-position: 50% 0 !important;
      background-size: auto !important;
      background-color: transparent !important;
      background: inherit;
 }

修改

但是，如果您只想让图像开始更高，请利用背景位置并编辑第二个变量。您的代码 [jsFiddle] 。

background-position: 0 50% !important;

背景图像不是100％

演示

3 个答案:

修改