0
フレックスボックスに背景画像を表示する際に問題があります。私は手動でHTMLにそれを入力するたびに画像を表示します...私は背景画像としてロードしようとします：url（ "imagepath"）それは読み込まれません。背景画像：CSSに表示されない
これは、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に間違った方法を使用している場合してください、 どうもありがとうございます。
これは、背景画像のパスを持つものでなければなりません。最初に、イメージがロードされている場合はフルパスイメージチェックを試みます。だから、問題がコードかパスかを知ることができます。 –
この質問は、最近、何度も何度も繰り返し尋ねられており、ソリューションはすべて同じ3つのうちの1つに典型的に沸騰します。私はSO、または少なくともインターネットを検索することをお勧めします。あなたは簡単にあなたの解決策を見つけるでしょう。 – Rob