Html 背景图像位置固定的div容器_Html_Css

Html 背景图像位置固定的div容器

html css

Html 背景图像位置固定的div容器,html,css,Html,Css,我想创建如下页面：我不想把图像作为背景。我想创建一个div容器，这个div容器有一个背景图像。在这个div下面应该是另一个div。如果我滚动这个div下面有背景图像的div，应该在这个div上面有背景图像。我有些东西，但都是垃圾。这是我的页面：代码如下： *{ 字体系列：“开放式SAN”；边际：0px；填充：0px；字号：18px； } html{ 身高：100%； } 身体{ 身高：100%；背景图像：url（'http://cdn1.editmysite.com/uploads

我想创建如下页面：

我不想把图像作为背景。我想创建一个div容器，这个div容器有一个背景图像。在这个div下面应该是另一个div。如果我滚动这个div下面有背景图像的div，应该在这个div上面有背景图像。我有些东西，但都是垃圾。这是我的页面：

代码如下：

*{
字体系列：“开放式SAN”；
边际：0px；
填充：0px；
字号：18px；
}
html{
身高：100%；
}
身体{
身高：100%；
背景图像：url（'http://cdn1.editmysite.com/uploads/3/8/9/4/38945355/background-images/748028443.png")重要,；
背景重复：不重复！重要；
背景位置：50%0！重要；
背景尺寸：自动！重要；
背景色：透明！重要；
背景：继承；
}
导航{
背景：url（“images/line header.png”）重复-x滚动中心底部#4A525A；
填充：15px；
位置：固定；
顶部：0px；
宽度：100%；
}
导航>ul{
边际：0px；
填充：0px；
文本对齐：居中；
}
导航ul>li{
左边距：25px；
显示：内联块；
列表样式类型：无；
}
导航ulli>a{
显示：块；
文字装饰：无；
颜色：黑色；
颜色：#697683；
过渡：颜色0.5s；
}
导航ulli>a：悬停{
颜色：#FFF；
}
.内容{
高度：1000px；
边缘顶部：500px；
背景颜色：橙色；
}

只需添加另一个

div

，并将

背景附件设置为固定的
.background{
  background: url('http://cdn1.editmysite.com/uploads/3/8/9/4/38945355/background-images/748028443.png') no-repeat;
  background-attachment: fixed;
  background-size: cover;
  height: 500px; <------can make 500px instead of using margin-top: 500px on .content
}


.content{
  height: 1000px;
  background-color: orange;
  /*margin-top: 500px;*/ <-------------take out
}

.background{
背景：url（'http://cdn1.editmysite.com/uploads/3/8/9/4/38945355/background-images/748028443.png")不重复;；
背景附件：固定；
背景尺寸：封面；
高度：500px；您可以尝试此操作，添加700px的图像高度和背景附件：固定
*{
    font-family: "Open Sans";
    margin: 0px;
    padding: 0px;
    font-size: 18px;
}
html {
    height: 100%;
}
body{
    height: 700px;
    background-image:url('http://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-attachment: fixed;
}

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;
}


<!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>

*{
字体系列：“开放式SAN”；
边际：0px；
填充：0px；
字号：18px；
}
html{
身高：100%；
}
身体{
高度：700px；
背景图像：url（'http://cdn1.editmysite.com/uploads/3/8/9/4/38945355/background-        images/748028443.png；
背景重复：不重复！重要；
背景位置：50%0！重要；
背景尺寸：自动！重要；
背景色：透明！重要；
背景附件：固定；
}
导航{
背景：url（“images/line header.png”）重复-x滚动中心底部#4A525A；
填充：15px；
位置：固定；
顶部：0px；
宽度：100%；
}
导航>ul{
边际：0px；
填充：0px；
文本对齐：居中；
}
导航ul>li{
左边距：25px；
显示：内联块；
列表样式类型：无；
}
导航ulli>a{
显示：块；
文字装饰：无；
颜色：黑色；
颜色：#697683；
过渡：颜色0.5s；
}
导航ulli>a：悬停{
颜色：#FFF；
}
.内容{
高度：1000px；
边缘顶部：500px；
背景颜色：橙色；
}





谢谢，太完美了！现在我如何更改图片的高度？我想要高度：图片的100%。但是图片不应该拉伸。只有真实的高度。例如，图片的高度是200px，我不想写高度：200px。我想写高度：100%，然后高度是200px。我希望你能理解我：D谢谢你的回答！你得到了绿色的钩子。如果你想要实际的高度和宽度，只需删除背景尺寸：封面，这将使图像保持原来的大小。它是新版本的：但是高度有问题。你能帮我吗？我想要高度=图像的真实高度。真的没有办法这样做，除非你的图像以某种方式被切掉。图像不够高。你可以使高度合适，但侧面会被切掉。谢谢你的答案！：）你的答案也很好，但在我的情况下，另一个答案更有用。