How to remove background colour from text-CodePudding

As you can see, there is a white background covering the background image. I tried adding background-color: transparent; to the text, but nothing happened. How can I get rid of the white background, but still have the text over the background image?

I am using Bootstrap 5.

* {
  padding: 0;
  margin: 0;
  font-family: "Roboto", sans-serif;
}

html {
  background: url(http://ndquiz.epizy.com/img/worldPersonalProject.png) no-repeat center fixed;
  background-size: cover;
}

.btn-select {
  background-color: #008cba;
  border-radius: 10px;
  text-align: center;
}

.main {
  margin-top: 100px;
  background-color: transparent !important;
}

.big {
  font-size: 60px;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<main >
  <h1 >Flag Quiz Game</h1>
  <div>
    <h2>Select Gamemode</h2>
    <a href="">Learn</a>
    <a href="">All (254)</a><br />
    <a href="">All Sovereign (195)</a><br />
    <a href="">Easy (15)</a><br />
    <a href="">Medium (30)</a><br />
    <a href="">Hard (60)</a><br />
    <a href="">Africa (55)</a><br />
    <a href="">Americas (35)</a><br />
    <a href="">Asia (51)</a><br />
    <a href="">Europe (50)</a><br />
    <a href="">Oceania (14)</a><br />
  </div>
</main>
<footer>
  Flags from <a href="https://flagpedia.net/" target="_blank">Flagpedia</a>
</footer>

CodePudding user response：

Check out these two approaches:

background-color: transparent;

background: url(<yourImage>);
background: rgba(255, 0, 0, 0.4);

You could even use the background as an img and change the opacity:

img { 
  opacity: 0.5; 
}

CodePudding user response：

You could try putting it to

background: none !important;

Otherwise you could set an RGBA background and put its Alpha channel to 0.

background: rgba(0, 0, 0, 0) !important;

Summary comments:

Fix is to move current background settings from html to body in the CSS. Original background removal will then work.