Question

  *{
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>

Answer 1

您可以为图像设置白色背景：

allowLinkPreview

Answer 2

从background移除#topheader，您可以尝试反转图像。

 *{
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>

我的背景是黑色的，但我希望我的图像显示在黑色上

2 个答案: