How to make the background of an image transparent in html?

A

Asprod2021-06-05 13:43:09

css

Asprod, 2021-06-05 13:43:09

I made png from jpg by deleting it with an eraser in Photoshop and saved it as png and added it to html through the img tag
. It should have come out without a white background, but for some reason it is

html

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="style.css">
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Popit.ru - Главная</title>
  <style>   a {
    text-decoration: none;
   }
   a:hover {
    text-decoration: none;
   }</style>
</head>
<body>
  <header class="header">
    <div class="header__text">
<a href="">
  <h2 class="pop" id="pc">Поп-иты</h2>
  <h3 class="pop" id="mobile">Поп-иты</h3>
</a>
<a href="">
  <h2 class="simple" id="pc">Симпл-димплы</h2>
  <h3 class="simple" id="mobile">Симпл-димплы</h3>
</a>
    </div>
  </header>
  <div class="content">
    <div class="about">
      <img src="popit.svg" alt="">
    </div>
  </div>
</body>
</html>

css

media screen and (orientation: portrait) {
.header {
border: none;
border-bottom: 1px solid white;
position: fixed;
width: 100%;
height: 10%;
right: 0;
top: 0;

}
#pc {
display: none;
}
#mobile {
display: inline-block;
}
}
.header {
border: none;
border-bottom: 2px solid white;
position: fixed;
width: 100%;
height: 10%;
right: 0;
top: 0;
background: #34e89e; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #0f3443, #34e89e); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #0f3443, #34e89e); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.content {
position: absolute;
right: 0;
bottom: 0;
width: 100%;
height: 90%;
background: #C33764; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #1D2671, #C33764); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #1D2671, #C33764); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}
media screen and (orientation : landscape){
#pc {
display: inline-block;
}
#mobile {
display: none;
}
.header {
border: none;
border-bottom: 2px solid white;
}
.header__text {
position: fixed;
margin-left: 10px;
}
}
.header__text {
position: fixed;
top: 0;
width: 100%;
height: 100%;
}
media screen and (orientation: landscape) {
.simple{
margin-top: 0.5%;
margin-left: 6%;
}
.pop {
margin-top: 0.5%;
margin-left: 4%;
float: left;
}
}
media screen and (orientation: portrait) {
.simple {
position: absolute;
margin-top: 3%;
margin-left: 10%;
}
.pop {
margin-top: 3%;
margin-left: 4%;
float: left;
}
}
.simple,.pop {
border-radius: 5px;
border: 2px solid white;
}.about {
background: #C33764; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #1D2671, #C33764); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #1D2671, #C33764); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
body {
background: #C33764; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #1D2671, #C33764); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #1D2671, #C33764); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

Reply

Answer the question

In order to leave comments, you need to log in

3 answer(s)

A

Alekosh Akhosh, 2021-06-05
@Akhosh

Apparently something was wrong in Photoshop, and the second option will help css opacity

D

Denis Yulamanov, 2021-06-05
@DvDenis

Either I have a mistake or the photo is broken, but I just don’t see it.
I would venture to suggest that if the picture has a background, then remove it only in Photoshop or similar programs, otherwise, if the picture has no background, but your page has a background, then your image is a child of an element that has a background.

S

strelok011, 2021-06-07
@strelok011

Photoshop needs to be mastered. Just rubbing with an eraser in the original jpg will not help.
https://youtu.be/awz-RjRF6E4