带有背景图像自动高度的div
[英]div with background-image auto height
问题描述
I want to create something like this (the fixed img + scroll): Page 
我想创建类似这样的内容（固定img +滚动）： 页面
And here is my page: MyPage 这是我的页面： MyPage
And my problem is the height of the div container with the background-image. 我的问题是带有背景图像的div容器的高度。 I have to set a value, but i dont want to set a value. 我必须设置一个值，但是我不想设置一个值。 What can i do, that the value will set automatically? 我该怎么办，该值将自动设置？ It should be no space between the two divs. 两个div之间应该没有空格。
Here the Code: 这里的代码：
*{ 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; }
<!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>
2 个解决方案
解决方案1
0 2015-01-02 09:51:18
Set background-size:100% 100% or background-size:cover or background-size:contain 设置background-size:100% 100%或background-size:cover或background-size:contain
*{ 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; }
<!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>
解决方案2
0 2015-01-02 10:28:18
You want to get height of Background image and set to css by using jquery 您想获取背景图片的高度并通过使用jQuery设置为CSS
http://jsfiddle.net/nikkirs/0h1fubea/ 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.