问题描述:

 *{

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;

Basically I have some images in my topheader, while the background of the webpage is black it causes the images to just show up plain black, how do I make it to where the images show through the black background?

If you need to see my main code, please let me know.

<!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>

网友答案:

You could set a white background for the images:

img {
 background: #fff;
}
网友答案:

Remove the background from #topheader, and you can try inverting images.

 *{
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>
相关阅读:
Top