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

Как задать прозрачность изображению?

Не могу понять как задать прозрачность изображению? вроде по идее opacity надо задать, но она вообще полностью скрывает
https://www.figma.com/design/JdM8rSHdWnNP3L17KD0xO...
68728462f0e95526413102.png
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>JOBPLY</title>
</head>
<body>
<header class="header">
<div class="container">
  <div class="header__inner">
  <h1 class="header__name">J<span>o</span>bply</h1>
  <nav class="nav">
    <ul class="header__list">
     <li><a href="#" class="header__link">Home</a></li>
     <li><a href="#" class="header__link">Categories</a></li>
     <li><a href="#" class="header__link">Service</a></li>
     <li><a href="#" class="header__link">Jobs</a></li>
    </ul>
  </nav>
  <a href="#" class="header_btn">Post a Vacancy</a>
  </div>
</div>

</header>
<main>
  <section class="find">
   <img src="./images/header.png" alt="">
  </section>
</main>
</body>
</html>

@import url("fonts/axiforma/stylesheet.css");
@import url("fonts/Perpetua/stylesheet.css");

body {
    font-family: 'Axiforma';
    margin: 0;
    
}

li {
    list-style: none;
}

a {
    text-decoration: none;
}

.container {
 width: 1190px;
 margin: 0 auto;
}

.header {
margin-top: 40px;
}

.header img {


mix-blend-mode: luminosity;
opacity: 0.05;
transform: rotate(90deg);

opacity: 0.05;


}


.header__inner {
 display: flex;
 justify-content: space-between;
 align-items: center;
}



.header__name {


font-family: 'Perpetua';
font-weight: 700;
font-size: 50px;
line-height: 57px;
letter-spacing: 0.02em;
text-transform: uppercase;

color: #232443;


}

.header__name span {
    color:#EE4F3C;
}


.header__list {
display: flex;
gap: 50px;
}

.header__link {



font-weight: 300;
font-size: 18px;
line-height: 28px;
text-align: center;
letter-spacing: 0.02em;

color: #000;

  
}


.header_btn {
 padding: 19px 30px;
 background-color: #EE4F3C;
 border-radius: 10px;
 font-weight: 600;
 font-size: 20px;
 line-height: 33px;
 text-align: center;
 letter-spacing: 0.02em;

color: #FFFFFF;


}

.find img {
 margin-top: -170px;
 opacity: 0.5;

}
  • Вопрос задан
  • 40 просмотров
4 комментария
Подписаться 1 Простой 4 комментария
Пригласить эксперта
Ответы на вопрос 1
alsolovyev
@alsolovyev
¯\_(ツ)_/¯ Enjoy life, Eat well & Laugh often
Экспортируйте Group 330 как svg и добавьте задним фотом или png картинкой (только смотрите, чтобы все 4 элемента были в группе).

Для примера нарисовал ваш (вроде похоже получилось) svg pattern для заднего фона (цвета и прозрачность поменяйте сами на ваши)
<svg width="396" height="396" viewBox="0 0 396 396" fill="none" xmlns="http://www.w3.org/2000/svg" opacity="0.1">
  <path d="M198 120C198 53.7258 251.726 0 318 0H396V78C396 144.274 342.274 198 276 198H198V120Z" fill="#89DDFF"/>
  <path d="M0 318C0 251.726 53.7258 198 120 198H198V276C198 342.274 144.274 396 78 396H0V318Z" fill="#FFCB6B"/>
  <path d="M198 120C198 53.7258 144.274 0 78 0H0V78C0 144.274 53.7258 198 120 198H198V120Z" fill="#C792EA"/>
  <path d="M396 318C396 251.726 342.274 198 276 198H198V276C198 342.274 251.726 396 318 396H396V318Z" fill="#F07178"/>
</svg>


После этого воспользуйтесь svg to background утилитой (например, https://yoksel.github.io/url-encoder/). Ваш паттерн для заднего фона:
.pattern {
  background-image: url("data:image/svg+xml,%3Csvg width='396' height='396' viewBox='0 0 396 396' fill='none' xmlns='http://www.w3.org/2000/svg' opacity='0.1'%3E%3Cpath d='M198 120C198 53.7258 251.726 0 318 0H396V78C396 144.274 342.274 198 276 198H198V120Z' fill='%2389DDFF'/%3E%3Cpath d='M0 318C0 251.726 53.7258 198 120 198H198V276C198 342.274 144.274 396 78 396H0V318Z' fill='%23FFCB6B'/%3E%3Cpath d='M198 120C198 53.7258 144.274 0 78 0H0V78C0 144.274 53.7258 198 120 198H198V120Z' fill='%23C792EA'/%3E%3Cpath d='M396 318C396 251.726 342.274 198 276 198H198V276C198 342.274 251.726 396 318 396H396V318Z' fill='%23F07178'/%3E%3C/svg%3E%0A");
}

Результат


зы если посмотрите, то заметите в css можно найти значение прозрачности. Не надо каждый раз генерить svg. Можно просто в css поправить цвет и прозрачность
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
HTML-верстальщик (HTML/CSS/JavaScript)
CleanTalk
от 100 000 ₽
Frontend-разработчик
MyAdsTarget
от 150 000 ₽
Frontend разработчик на React
SkillsRock • Таганрог
от 60 000 до 90 000 ₽
Ещё вакансии