Задать вопрос
@Asprod
html

Как сделать задний фон картинки прозрачным html?

Сделал из jpg png удалив ластиком в фотошопе и сохранил как png и добавил его в html через тег img
.Должно было выйти без белого фона но почему то он есть
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/bootstrap@5.0.1/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+ */
}
  • Вопрос задан
  • 3154 просмотра
Комментировать
Подписаться 1 Средний Комментировать
Пригласить эксперта
Ответы на вопрос 3
Akhosh
@Akhosh
Полый верстальщик
Видимо что-то в фотошопе не так сделал, а второй вариант поможет css opacity
Ответ написан
Комментировать
Комментировать
@DvDenis
Ошибка либо у меня либо фотография ломанная, но я её просто не вижу.
Рискну предположить что если картинка с фоном, то убирать только в Photoshop или в подобных программах, иначе, если картинка без фона, но на вашей странице фон есть, значит ваше изображения является дочерней для элемента у которого есть задний фон.
Ответ написан
2 комментария
2 комментария
@strelok011
Фотошоп надо освоить. Просто ластиком потереть в jpg оригинале не поможет.

https://youtu.be/awz-RjRF6E4
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
WordPress-разработчик
div. • Ставрополь
от 50 000 до 120 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Интеграция Apache Superset и Google таблиц
15 нояб. 2024, в 20:33
15000 руб./за проект
Разработка wiki плагина для wordpress
15 нояб. 2024, в 20:22
5000 руб./за проект
Организовать CI\CD для группы фрилансеров и настроить VLESS-сервер
14 нояб. 2024, в 04:59
1200 руб./в час
Ещё заказы