Question

我想创建这样的东西（固定的img +滚动）：Page

这是我的页面：MyPage

我的问题是带有background-image的div容器的高度。我必须设置一个值，但我不想设置一个值。我能做什么，价值会自动设定？两个div之间应该没有空格。

这里的代码：

＆＃13;

*{
    font-family: "Open Sans";
    margin: 0px;
    padding: 0px;
    font-size: 18px;
}
html {
    height: 100%;
}
body{
    height: 100%;
}

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;
}

.header-bg{
  background: url('http://cdn1.editmysite.com/uploads/3/8/9/4/38945355/background-images/748028443.png') no-repeat;
  background-attachment: fixed;
  background-size: 100%;
  height: 1000px;    
}

.content{
    height: 1000px;
    background-color: orange;
}

＆＃13;

<!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="header-bg"></div>
            
            <div class="content">
                <h1></h1>
            </div>
            
    </body>
</html>

＆＃13;

Answer 1

设置background-size:100% 100%或background-size:cover或background-size:contain

＆＃13;

*{
    font-family: "Open Sans";
    margin: 0px;
    padding: 0px;
    font-size: 18px;
}
html {
    height: 100%;
}
body{
    height: 100%;
}

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;
}

.header-bg{
  background: url('http://cdn1.editmysite.com/uploads/3/8/9/4/38945355/background-images/748028443.png') no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
  height: 1000px;    
}

.content{
    height: 1000px;
    background-color: orange;
}

＆＃13;

<!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="header-bg"></div>
            
            <div class="content">
                <h1></h1>
            </div>
            
    </body>
</html>

＆＃13;

Answer 2

您希望获得背景图像的高度并使用jquery

设置为css

http://jsfiddle.net/nikkirs/0h1fubea/

<script>
$(document).ready(function(){
var url = $('#header-bg').css('background-image').replace('url(', '').replace(')', '').replace("'", '').replace('"', '');
var bgImg = $('<img />');
bgImg.hide();
bgImg.bind('load', function()
{
    var height = $(this).height();
    alert(height);
    $('#header-bg').css('height',height);
});
$('#header-bg').append(bgImg);
bgImg.attr('src', url);

});
</script>

div与背景图像自动高度

2 个答案: