帶有背景圖像自動高度的div
[英]div with background-image auto height
問題描述
我想創建類似這樣的內容（固定img +滾動）： 頁面
這是我的頁面： MyPage
我的問題是帶有背景圖像的div容器的高度。 我必須設置一個值，但是我不想設置一個值。 我該怎么辦，該值將自動設置？ 兩個div之間應該沒有空格。
這里的代碼：
*{ 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
設置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
您想獲取背景圖片的高度並通過使用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與背景圖像和高度自動
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.