Question

现在这是完整的html / CSS，因为有人为它做了准备。

这是一个更新版本，但它仍然无效！我在localhost（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;
}

如何使图像正常工作？我已经在互联网上搜索过但我无法在任何地方找到它。有人请帮忙。

Answer 1

使用\

更改/

 .logo{
      background-image:url('Images/Computing.jpg');
}

如果您没有看到图像尝试放置图像的尺寸，例如，如果是200 * 300，请尝试：

 .logo{
          width:200px;
          height:300px;
          background-image:url('Images/Computing.jpg');
    }

Answer 2

您使用backslash代替常规slash。

background-image:url('Images\Computing.jpg');}
                            ^
                            ^

background-image:url('Images/Computing.jpg');}

如果图像确实位于指定位置，则应该可以使用。

Answer 3

如果您的站点在Linux上，您应该知道在服务器站点上，文件名区分大小写（Computing.jpg不等于computing.jpg）。注意文件名与css引用相同。

祝你好运！

Answer 4

你应该使用背景图像样式作为

.logo { background-image:url('Images/computing.jpg');}

Answer 5

我同意上面关于斜线的所有人，并且你需要BG图像的宽度和高度，但我看到可能导致问题的其他东西。假设您在Web服务器上执行此操作，而不是在本地执行此操作。如果这是一个Linux环境，那么一切都需要区分大小写。我发现使用Images /我会改为images /

是不好的做法

Answer 6

在徽标div中写一些文字，以确保div的高度和高度没有问题。

Answer 7

使用：

background-image:url('../Images/Computing.jpg');

以相对方式调用CSS，这需要您指定相对于CSS文件的路径。

不能使用Background-image html / css

7 个答案: