Применение градиента к изображению с помощью CSS
25.04.2023 06:01
Здравствуйте, братья и сестры, как дела? Недавно я застрял на применении градиента к изображению. Я применял это много раз, но иногда наши требования обязывают нас реализовать решение определенным образом. Мы можем применить градиент к изображению многими способами, но мы обсудим два наиболее используемых типа реализации градиента.
Фон и градиент реализованы с помощью CSS
<!DOCTYPE html>
<html>
<head>
<style>
body{
background:black;
}
#grad1{
background-image:
linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.99)),
url('https://wallpapers.com/images/featured/2ygv7ssy2k0lxlzu.jpg');
width: 400px;
height: 400px;
background-size: cover;
color: white;
padding: 20px;
}
</style>
</head>
<body>
<div id="grad1">
<h1>hello world</h1>
</div>
</body>
</html>
Применение градиента к элементу HTML img
<!DOCTYPE html>
<html>
<head>
<style>
body{
background:black;
}
.new{
width:200px;
height:200px;
object-fit:cover;
background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.99));
postion:relative;
z-index:5;
}
.new > img{
position:absolute;
z-index:-1;
width:200px;
height:200px;
object-fit:cover
}
</style>
</head>
<body>
<div class="new">
<img src="https://wallpapers.com/images/featured/2ygv7ssy2k0lxlzu.jpg" />
<p>This text will written on image</p>
</div>
</body>
</html>Запомните: -
- Если вы хотите придать изображению эффект затухания снизу вверх, используйте градиент с прозрачным цветом в начале и фоновым цветом в конце эффекта затухания, например:
linear-gradient(to bottom, transparent,rgba(0, 0, 0, 0.99));
Если это ценно, пожалуйста, подпишитесь на канал Tech 9-on.
OK Guys, Tata Bye Bye..... Лабиринт кро...
Продолжайте учиться.......
Стоит ли изучать PHP в 2023-2024 годах?
20.08.2023 18:21
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в 2023-2024 годах? Или это полная лажа?".
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
20.08.2023 17:46
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
19.08.2023 18:39
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в частности, магию поплавков и гибкость flexbox.
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
19.08.2023 17:22
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для чтения благодаря своей простоте. Кроме того, мы всегда хотим проверить самые последние возможности в наших проектах!
Концепция локализации и ее применение в приложениях React ⚡️
18.08.2023 20:33
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий их языку и культуре.
Пользовательский скаляр GraphQL
14.08.2023 14:49
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип предназначен для представления неделимого значения.