[英]Background-image width & height 100%
我的網站上有一個div,在這個div中,我想嵌入背景圖片。 現在的問題是,我看不到圖片。 我怎么看圖片? 我找不到我的錯誤。 如果我將圖片嵌入HTML代碼中,則可以使用,但不能使用CSS代碼。 因為我想創建類似的內容: 頁面 (圖像+滾動)
這是我的頁面: 頁面
*{
font-family: "Open Sans";
margin: 0px;
padding: 0px;
font-size: 18px;
}
body{
/*background: url("images/bg.png") repeat-x scroll left top #9EB5D6;
background: url("images/bg2.png"); */
}
nav{
background: url("images/line-header.png") repeat-x scroll center bottom #4A525A;
padding: 15px;
}
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;
}
.pic1 {
background: url(images/banner.jpg);
background-size: 100% 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="pic1">
</div>
</body>
</html>
您需要添加:
html, body{
height: 100%
}
然后可以向圖像容器添加height
:
.pic1{
background: url("images/line-header.png") repeat-x scroll center bottom #4A525A;
background-size: 100% 100%;
height: 100%;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.