2016-04-30 100 views
1
*{ 
margin:0px; 
padding:0px; 
} 

h1{ 
font:bold 20 px Tahoma; 

    } 
h2{ 
font: bold 14px Tahoma; 
} 

    header, section, footer, aside, nav, article, { 
display:block; 
    } 

    body{ 
width:100%; 
display:-webkit-box; 
-webkit-box-pack: center; 
background-color: black; 
color:white; 

} 

    #bigwrapper{ 
max-width: 1000px; 
margin: 20px 0px; 
display:-webkit-box; 
-webkit-box-orient: vertical; 
-webkit-box-flex; 1; 
    } 
    #topheader{ 
background:white; 

padding: 20px; 
text-shadow:rgb(110,110,110) 3px 3px 5px; 

基本上我有我的topheader一些图像,而网页的背景是黑色的它会导致图像只显示了纯黑色的,怎么办我是通过黑色背景让图像显示在哪里的?我的背景是黑色的,但我想我的图片显示在黑色

如果您需要查看我的主代码,请告诉我。

<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>About us</title> 
<link rel="stylesheet" href="main.css"> 
</head> 
<body> 
<div id="bigwrapper"> 
<header id="topheader"> 
<br> 
<br> 
<br> 
<center><img width="200" height="200" class="irc_mi iGDtkhtShETk-pQOPx8XEepE" style="margin-top: 0px;" alt="" src="http://www.clker.com/cliparts/1/5/2/f/1219988685315274755checkered%20flag.svg.hi.png">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
<img class="spotlight" aria-busy="true" aria-describedby="fbPhotosSnowliftCaption" style="width: 200px; height: 200px;" alt="" src="https://scontent-atl3-1.xx.fbcdn.net/hphotos-xla1/v/t1.0-9/12313702_922106124540079_548849285871043524_n.jpg?oh=562422204798663858ab12d90c64b7c8&amp;oe=5773C80B">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
<img width="200" height="200" class="irc_mi iGDtkhtShETk-pQOPx8XEepE" style="margin-top: 0px;" alt="" src="http://www.clker.com/cliparts/k/M/F/0/t/p/finish-line-flag-pin-hi.png"> 
<h1> Welcome to the About Us page for Exclusive Automotive!</h1> 

</header> 
+0

请添加一些HTML代码。 – SEUH

+0

无法重现。正如你可以看到[这里](https://jsfiddle.net/1rb1tze4/),图像显示得很好。你可能有其他的东西打破你的设计。 –

回答

0

你可以设置一个白色背景的图片:

img { 
background: #fff; 
} 
0

#topheader取出background,你可以尝试反向图像。

*{ 
 
margin:0px; 
 
padding:0px; 
 
} 
 

 
h1{ 
 
font:bold 20 px Tahoma; 
 

 
} 
 
h2{ 
 
font: bold 14px Tahoma; 
 
} 
 

 
    header, section, footer, aside, nav, article, { 
 
display:block; 
 
    } 
 

 
    body{ 
 
width:100%; 
 
display:-webkit-box; 
 
-webkit-box-pack: center; 
 
background-color: black; 
 
color:white; 
 

 
} 
 

 
    #bigwrapper{ 
 
max-width: 1000px; 
 
margin: 20px 0px; 
 
display:-webkit-box; 
 
-webkit-box-orient: vertical; 
 
-webkit-box-flex; 1; 
 
} 
 
    #topheader{ 
 
/* background:white; */ 
 

 
padding: 20px; 
 
text-shadow:rgb(110,110,110) 3px 3px 5px; 
 
} 
 
.irc_mi{ 
 
    -webkit-filter: invert(1); 
 
    filter: invert(1); 
 
}
<div id="bigwrapper"> 
 
<header id="topheader"> 
 
<br> 
 
<br> 
 
<br> 
 
<center><img width="200" height="200" class="irc_mi iGDtkhtShETk-pQOPx8XEepE" style="margin-top: 0px;" alt="" src="http://www.clker.com/cliparts/1/5/2/f/1219988685315274755checkered%20flag.svg.hi.png">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
 
<img class="spotlight" aria-busy="true" aria-describedby="fbPhotosSnowliftCaption" style="width: 200px; height: 200px;" alt="" src="https://scontent-atl3-1.xx.fbcdn.net/hphotos-xla1/v/t1.0-9/12313702_922106124540079_548849285871043524_n.jpg?oh=562422204798663858ab12d90c64b7c8&amp;oe=5773C80B">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
 
<img width="200" height="200" class="irc_mi iGDtkhtShETk-pQOPx8XEepE" style="margin-top: 0px;" alt="" src="http://www.clker.com/cliparts/k/M/F/0/t/p/finish-line-flag-pin-hi.png"> 
 
<h1> Welcome to the About Us page for Exclusive Automotive!</h1>