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

jjsso, Пройдите интерактивные тренажеры в htmlacademy.ru уже будет полегче

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

jjsso,

может найду решения

В смысле, "может"?

<div>
  <header/>
  <section class="intro"/>
</div>

div {
 background: url() left -20px repeat-y;
 }

20px это сдвиг вверх, посмотрите сколько он в макете.
Сама картинка из 8 лепестков: два первых ряда.

Что тут искать? Простейшие свойства.

Вроде тема фонов это одна из первых тем по CSS. Где вы учитесь, что вам не рассказали даже такой базы?

Если подразумевается, что налево фон повторяется до края окна, а контент центрирован, то структура такая же, фон псевдоэлементу с шириной 50% - "что там выходит от правого края фона до центра".
Тогда в качестве самого фона берем 4 лепестка и репитим и по горизонтали и по вертикали.

Как лучше всего реализовать данный фон?

Никита Геннадич,

Имел ввиду, разумеется, position: absolute, исправил в ответе.

Ага
Со всеми приключается.

Нет там ничего сомнительного, это просто номер слоя, в чём тут можно запутаться?

z-index
Вопрос вам, как профи (просто, чтобы вспомнить, что всё не так просто):
На странице есть элементы с z-index 0, 20 и 99. Всегда ли 99 будет поверх двух остальных?
Для новичков про нюансы контекста наложения:
css.yoksel.ru/kontekst-nalozheniya
https://developer.mozilla.org/ru/docs/Web/CSS/CSS_...

В чём минус отдельного дива не понимаю до сих пор.

Давайте так: повторю, что один див вообще не сделает погоду и мы не будем говорить про экономию на спичках. Будем считать, что страница сложная и есть за что бороться и что оптимизировать.

before/after vs div

Простые аргументы:

Чистота кода - в разметке смысл, украшения в стилях.
И как последствие этого, для изменения внешнего вида (в том числе и для переключения разных тем оформления на сайте) не нужно лезть в разметку, достаточно работать только со стилями.

(Если вернуться к тому же z-index или избавлению от него, совсем элементарная замена before на after поменяет порядок наложения элементов. В случае div, придётся переставлять его в разметке.)

Яркий пример: современная стилизация радио и чекбоксов. Можно нагородить древний огород из пустых тегов и сложных селекторов. (Написание таких селекторов, несомненно, очень полезно при обучении и изучении работы CSS, но в реальных проектах лучше без них)
А можно использовать appearance none и стилизовать напрямую, а также использовать before/after этих инпутов.

Посложнее:

Чем сложнее DOM дерево, тем тяжелее будут работать сложные селекторы.
Это же усложнит и замедлит операции, связанные с обходом, поиском и манипуляциями через JS.
При замене на псевдо снижается нагрузка на память, поскольку каждый DOM-элемент — это объект с собственными свойствами и событиями, а псевдоэлементы — лишь часть визуального оформления.

С точки зрения рендеринга браузера, псевдоэлементы обрабатываются быстрее, чем полноценные DOM-узлы, поскольку не требуют поддержки событий, не участвуют в DOM-операциях и не влияют на структуру документа. Они добавляются на этапе формирования рендер-дерева и используются только для визуализации.

В вопросах на stackoverflow и других частных ресурсах есть примеры исследований скорости рендеринга и fps при анимациях, легко гуглятся. Не хочу приводить сюда ссылки, потому что кроме этого там есть и устаревшая информация. Да и думаю, что вы, как профи, можете самостоятпельно сотворить такой тест, если действительно интересно.

Представьте, что спискам на сайте нужно добавить стрелочки/галочки/звёздочки. Вы же не станете засовывать в каждый по пустому спану. (Я надеюсь)

Почему-то один из популярных запросов ко мне: у нас тупит страница, хепл плиз. Речь в основном о длинных страницах или многоблочных лендингах. Обычно с них удается удалить пару десятков тысяч узлов. Конечно, тут роль играет не только количество, но и их вложенность.

Псевдо для стилизации применять — это всегда кривые-косые костыли, которые везде по разному выглядят.

Действительно по-разному могут работать всякие ::marker, специфические псевдо инпутов или селектов и т.д.

::before и ::after работают всюду одинаково и их стилизация отличается от div только
1. Наличием content
2. По умолчанию разным display, у div он блочный, у псевдо инлайновый.
3. Начальный порядок "элементов". Before всегда первый, after последний, div можно вставить куда угодно.
Всё.

Если у вас что-то пошло не так, приходите с отдельным и конкретным вопросом с примером. Можете даже позвать.

Как повторить фильтр с фигмы?

vlados096zver, часто такие картинки дешевле экспортировать как png, даже с учетом разной плотности и т.д., чем блюрить.
Но окончательное решение, конечно, зависит от ТЗ и того что в макете.

Как лучше всего реализовать данный фон?

Никита Геннадич,

а в чем проблема прилипшего фона?

Ни в чем, кроме того, что он там не должен прилипать. Он там с девушкой дружит.
Пятно само по себе могло бы и прилипнуть десяток или пару десятков лет назад (когда там bg attachment было модно), но с девушкой - очень сомнительно.
Но это скорее вопросы к дизайнеру или ТЗ.

Что не так с z-index? Тоже какие-то проблемы о которых рассказали на курсах?

С одним - ничего или близко к тому для современных браузеров.
Только зачем вообще, если можно без него.

очевидно z-index должен быть выше

Очевидность работы z-index вообще сомнительна, а для новичков особенно.
И пока не появилось прозрачности или трансформа или других аспектов меняющих контекст наложения, всё будет хорошо. Но мы вообще не знаем, что там ниже в макете.

У вас, видимо, привычка верстать всратые убогие лэндинги ни на секунду не задумываясь о том как ими люди пользуются. Как и у вашего дизайнера.

Моя фраза вроде была как раз об обратном, к тому, что устройства бывают очень разные.
Если хотите продолжать беседу, то смените тон.

Как лучше всего реализовать данный фон?

Никита Геннадич,

а, то есть transform это гораздо лучше отдельного дива?)

Т.е. вы всё таки знаете минусы лишнего дива вместо псевдика. Уже хорошо.

Но нет, трансформ не лучше.
Лучше просто фоном.
Но если выбирать между псевдо с трансформом и дивом с ним же, то лучше псевдик.

Как лучше всего реализовать данный фон?

position fixed

Ну и зачем там прилипший фон?
Да ещё и дивом сделанный?

z-index (у остальных элементов, очевидно z-index должен быть выше).

Вообще отличный план (Не надо так делать, если есть возможность не делать).

прибитый справа вверху

Теперь откройте на большом мониторе: контент остался по центру, а девушка с пятном улетела вправо.
Покажите результат дизайнеру, пусть плачет.

Нужно записать видео с аудио из браузера. Какой программой?

OBS, Movavi

Как повторить фильтр с фигмы?

Открываете инструменты разработчика. Вкладка Styles. Находите нужное свойство. Кликаете мышкой по значению, стрелками с клавиатуры увеличиваете или уменьшаете значение.
До тех пор, пока не понравится.

Как лучше всего реализовать данный фон?

Псевдоэлемент приходится подгонять постоянно, т.к. "съезжает" словно бы в сторону

Считать от центра. Не важно фон или псевдо.
Либо от правого края и трансформ с %.

Идея экспортировать вместе с девушкой - неплоха, если девушка не меняется.
Только не забудьте сделать варианты для разной плотности экранов и через image-set

Как выровнять текст и картинку внутри ссылки?

oksana_melikhova,
1. Абсолют, с виду, лишний. Иконка ведь внутри ссылки. Флекса достаточно.
2. Если вдруг хочется всё таки абсолютом, то нужно разобраться со значениями. Откуда вылезли 80% и 120% и 40px в паддинге.
Когда эти числа обретут логику, станет нормально.

Типа
left 0
top 50%
translateY -50%
И padding ссылки 100px + 40px = 140px (можно кастомными свойствами)
Так логично.

Но повторю, что разумнее флексом.

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

jjsso, фоном хедеру. Если хедер это весь белый блок.
Либо фоном псевдоэлемента хедера.

Если хедер это только лого с меню, а секция отдельно, то обернуть в div.
Альтернатива - считать высоту псевдика на JS и передавать через кастомное свойство.
Либо гридом, если body целиком грид.

В разметке ему в любом случае делать нечего.

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

jjsso, хоть фигмой, хоть прямо хромом или любимым приложением.

Хромом

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

jjsso, пи-пет-кой!
Ещё раз: не посмотреть цвет в панели, не стили через inspect, а тыкнуть пипеткой.

У вас белый фон, он не меняется, вам не нужна прозрачность или наложение, можно ничего не усложнять.

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

jjsso, что показывает, если тыкнуть в него пипеткой?

Не влезает шрифт в input?

Способы с изменением размера шрифта не предлагать, так как не помогает.

Звучит по меньшей мере удивительно.

Но почитайте ещё про ascent-override, descent-override и line-gap-override

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

jjsso, есть совсем простой вариант.
Экспортируете svg, тыкаете пипеткой в нужные 4 цвета, меняете fill лепесткам.

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

jjsso, а, так это учебный или тестовый макет, судя по комментариям в нём...

но проблема в том , что он мне экспортирует вообще в другом виде

Экспортирует в том виде, в котором попросили. Это будет видно в превью экспорта.
Какой отсюда вывод? Экспортируете не тот слой.

если задать как фон , так вообще все по другому отображается

Вы уж почитайте какие есть свойства фона. Повторения, размер, позиция и т.д.

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

Экспортируйте из макета в том виде, который вам нужен.
Ну и это фон, а не img.

Ответьте на вопрос по информатике?

Ничего не изменилось в дизайне странице.

Ну это смотря куда он попал этими пробелами.
Например, если в путь к стилям, то изменения будут прям конкретные.