Rob*_*man 0 html css background-image
我遇到了在flexbox中显示背景图片的问题.每当我在HTML中手动输入它时它会显示图像,但是......当我尝试将其加载为background-image:url("imagepath")时,它将不会加载.
这是CSS:
* {
box-sizing: border-box;
}
/*Style van overall body*/
body {
margin: 0;
background-color: #f3f3f3;
color: white;
}
/*Style voor h2 tekst*/
h2 {}
/* Style the header */
.header {
background-color: #999999;
padding: 50px;
text-align: center;
}
/* Container for flexboxes */
.row {
display: -webkit-flex;
display: flex;
}
.contentrow {
display: -webkit-flex;
display: flex;
}
/* 3 middelse columns (Grootte wordt bepaald in html doc (Standaard: Flex-Grow: 4;)) */
.column {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 0px;
text-align: center;
}
.newsboxtop{
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
border: 3px;
background: url("images/Lightgraydient75x30.png");
text-align: center;
height: 30px;
}
.middlemenu {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 0px;
height: 50px;
text-align: center;
margin: 0px;
}
/* Container for newsboxes */
.newsrow {
display: -webkit-flex;
display: flex;
}
.newsbox {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
margin-top: 30px;
margin-left: 30px;
margin-right: 30px;
margin-bottom: 30px;
min-width: 200px;
height: 225px;
text-align: center;
background-color: #999999;
}
/* Style van de footer. */
.footer {
background-color: #999999;
padding: 10px;
text-align: center;
}
/* Zorgt ervoor dat bij het krimpen de flexboxes stapelen i.p.v. naast elkaar blijven staan.*/
@media (max-width: 1280px) {
.row {
-webkit-flex-direction: column;
flex-direction: column;
}
}
@media (max-width: 1500px){
.newsrow {
-webkit-flex-direction: column;
flex-direction: column;
}
}
这是HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="header">
<h2>234234</h2>
</div>
<div class="row">
<div class="column" style="background-color:#444; padding: 10px;">1337 WHEH</div>
<div class="column" style="background-color:#555; flex-grow: 4;">
<div class="middlemenu" style="background-color:#777">
<!--Hier komt menu content-->
</div>
<div class="newsrow">
<div class="newsbox">
<div class="newsboxtop">
<!--////////////////////////////////////////////////////-->
<!-- images/Lightgraydient75x30.png This is for testing -->
<!--////////////////////////////////////////////////////-->
asd
</div>
</div>
<div class="newsbox">
<div class="newsboxtop">
dfg
</div>
</div>
<div class="newsbox">
<div class="newsboxtop">
ghj
</div>
</div>
</div>
</div>
<div class="column" style="background-color:#666; padding: 10px;">1337 WHEEEH</div>
</div>
<div class="footer">
<p>Footer</p>
</div>
</body>
</html>
如果我忽略了某些东西,或者我错误地使用CSS,请告诉我,非常感谢你.
小智 5
你有没有尝试过
background: url("../images/Lightgraydient75x30.png");