現在這是完整的HTML/CSS,因爲有人aked它。無法使用背景圖片HTML/CSS
這是一個更新版本,但它仍然無法正常工作!我在本地主機上運行這個(usbwebserver)。
我想使用背景圖像的一個div,但它不會顯示圖像形象。在圖片文件。
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Computing</title>
<link rel="stylesheet" type="text/css" href="css/CSS.css">
<link rel="shortcut icon" href="Images/laptop.ico" />
</head>
<header class="Header">
<div class="logo" onClick="location.href='Home.html'"> </div>
<h1>Computing</h1>
</header>
<body>
<div class="opvulling1"></div>
<div class="buttonA">Home</div>
<div class="button" onClick="location.href='Laptops.php'">Laptops</div>
<div class="button" onClick="location.href='Cameras.php'">Camera's</div>
<div class="button" onClick="location.href='gsms.php'">GSM's</div>
<div class="button" onClick="location.href='Contact.html'">Contact</div>
<div class="button" onClick="location.href='Winkelwagen.php'">Winkelwagen</div>
<div class="opvulling2"></div>
<div class="Central">
<section>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lacus augue, aliquam ut gravida eget, adipiscing in elit. Suspendisse potenti. Integer laoreet, risus nec fermentum imperdiet, leo magna interdum eros, eu aliquam turpis risus eget nulla. Vivamus ultrices urna vitae nisl vestibulum cursus. Suspendisse sed gravida libero. Fusce blandit dui id porttitor sodales. Morbi vitae sapien quis nulla gravida dignissim. Donec pharetra ipsum tellus, sed laoreet dui viverra in. Nullam blandit diam ac quam consectetur consectetur. Nulla facilisi. Nam ut quam diam. Nunc nec nisl ut tortor luctus commodo. Fusce nec velit neque. Vivamus ac dui tempor, malesuada lacus sed, sollicitudin odio. Nullam ac adipiscing velit, sed dapibus mauris. Sed et egestas dolor.</section>
<section>Phasellus non interdum nisl. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi sed convallis nisi. In in tellus eleifend, tincidunt metus et, auctor mauris. Nullam risus libero, condimentum in adipiscing elementum, tincidunt ut elit. Sed eu diam sed erat aliquam convallis in a mauris. Cras at enim condimentum dolor consequat consequat. Nulla mattis leo in justo molestie, nec tincidunt nulla consequat. Duis accumsan congue lacus sit amet vehicula. Duis vitae pretium urna. Donec sodales, risus id auctor tempor, nisi nisi vehicula dui, in aliquam ante arcu sit amet dui. Curabitur fringilla cursus erat, id lobortis neque aliquet a. Etiam et pharetra diam.</section>
</div>
CSS:
body{
background-color:#CAEAED;
}
.logo{
background-image:url('Images/Computing.jpg');
height:100px;
width:200px;
}
.Central{
background-color: #FFFFFF;
width: 50%;
margin-top: 50px;
margin-left:20%;
height: auto;
padding: 1%;
font-family:Arial;
font-size: 16px;
}
.Header{
background-color: #CAEAED;
margin-top:-10px;
margin-left:-10px;
width: 101%;
position:relative;
height: 5%;
padding-top:1px;
padding-right: 1%;
text-align:center;
}
h1{
font-size:30px;
font-family:Arial;
text-align: center;
}
section{
padding: 1%;
}
.button{
background-color:#009999;
font-family:Arial;
font-size: 16px;
position:relative;
float:left;
margin-top: 2px;
margin-right:2px;
height:20px;
padding:5px;
}
.buttonA{
font-family:Arial;
font-size: 16px;
background-color:#015965;
transition: width 2s;
margin-top: 2px;
position:relative;
float:left;
margin-right:2px;
height:20px;
padding:5px;
}
.opvulling1{
background-color:#009999;
float:left;
margin-left:-10px;
margin-top: 2px;
margin-right:2px;
height:20px;
padding:5px;
width:20%;
}
.opvulling2{
background-color:#009999;
float:left;
margin-top: 2px;
margin-right:-2000px;
height:20px;
padding:5px;
width:1200px;
}
.button:hover{
cursor:pointer;
background-color:#1F6B75;
font-family:Arial;
font-size: 16px;
}
img{
height: 250px;
width: 300px;
}
h3{
font-family:Arial;
}
form{
float: left;
margin-left: 20px
}
td{
width:40%;
text-align:center;
}
.Prijs{
float:left;
}
.article{
position:relative;
float:left;
margin-right:20px;
background-color:white;
}
h2{
font-family:Arial;
}
我怎樣才能使圖像的工作?我已經在互聯網上搜索過它,但我無法在任何地方找到它。有人請幫忙。
路徑是否正確? –
'div'可能沒有高度。嘗試設置此div的尺寸或添加一些內容 –