Как сделать изображение поверх других элементов css

Картинка поверх элементов

Добрый вечер! При верстке столкнулся с такой проблемой, никак не могу вывести эту линию поверх всех элементов, так, чтобы это не перекрыло возможность взаимодействовать с блоком акций, то есть ховеры и т.д. Как это реализовать? Заранее благодарен. Верстка: http://smart-kids-shop.ru/dd/ Разметка:

 
 
 
 
 
 
АКЦИЯ!
 
СПОРТИВНАЯ МАМА
 
15 специальных тренировок для восстановления после родов + 5 лимфодренажных массажа. Программа рассчитана на 4 месяца с заморозкой
 
15.500 р.
 
 
 
 
 
 
АКЦИЯ!
 
СПОРТИВНАЯ МАМА
 
15 специальных тренировок для восстановления после родов + 5 лимфодренажных массажа. Программа рассчитана на 4 месяца с заморозкой
 
15.500 р.
 
 
 
 
 
 
АКЦИЯ!
 
СПОРТИВНАЯ МАМА
 
15 специальных тренировок для восстановления после родов + 5 лимфодренажных массажа. Программа рассчитана на 4 месяца с заморозкой
 
15.500 р.
 
 
 
 
 
 
АКЦИЯ!
 
СПОРТИВНАЯ МАМА
 
15 специальных тренировок для восстановления после родов + 5 лимфодренажных массажа. Программа рассчитана на 4 месяца с заморозкой
 
15.500 р.
 
 
 
 
 
 
 
 
 
 
ЗАНИМАЙСЯ БЕСПЛАТНО!
 
Заполните заявку и наш менеджер свяжется с вами в течение 10 минут.
 
 
 
 
 

section.akcii < background: #202020; div.akcia < z-index: 194; cursor: pointer; max-width: 80%; display: block; margin: 0 auto; margin-top: 80px; margin-bottom: 80px; transition: 0.5s; background: -moz-linear-gradient(top, #ffe701 0%, #fcbf12 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #ffe701 0%,#fcbf12 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #ffe701 0%,#fcbf12 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffe701', endColorstr='#fcbf12',GradientType=0 ); /* IE6-9 */ &:hover < z-index: 194; opacity: 1; img < opacity: 0.15; transition: 0.5s; >p.title < opacity: 0; transition: 0.5s; >div.onhover < opacity: 1; transition: 0.5s; >> div.onhover < opacity: 0; position: absolute; text-align: center; max-width: 60%; top: 80px; left: 20%; color: #fff; transition: 1s; h3 < font-family: "GothaBol", sans-serif; font-size: 24px; letter-spacing: 3px; >hr < max-width: 40%; >p < font-size: 14.23px; font-family: "GothamR", sans-serif; >> img < width: 100%; display: inline; transition: 0.5s; >p.title < top: 250px; display: inline-block; position: absolute; color: #fff; font-size: 32.86px; font-family: "GothaBol", sans-serif; z-index: 1; left: 37%; top: 280px; letter-spacing: 3px; transition: 1s; >> > div.line < background: url("../img/line.png"); position: absolute; background-repeat: no-repeat; top: 991px; width: 100%; height: 2581px; z-index: -1; >

Необходим такой результат:

Наложение текста поверх картинки CSS

Чтобы расположить один элемент сверху другого, используется свойство z-index.

Как наложить текст поверх картинки CSS? Z-Index

Это свойство CSS устанавливает порядок элементов в стеке. Оно работает только с элементами, позиционированными с помощью position как absolute, relative, fixed, sticky. Но не static.

Допустим, что экран компьютера расположен – это фон, а реальный мир – на переднем плане. Каждый элемент без указанного z-index является слоем по умолчанию.

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

Вот еще несколько особенностей использования Z-index:

• Элементы в стеке располагаются в порядке возрастания.
• По умолчанию слой имеет z-index: 0.
• Отрицательные значения z-index смещают элемент ниже слоя по умолчанию.
• Элемент с наименьшим значением z-index будет расположен глубже всех.
• Положительные значения смещают элементы выше слоя по умолчанию.
• Элемент с наибольшим значением будет расположен впереди всех.

Пример

В примере я сместила изображение назад, установив z-index в -1. При этом не нужно указывать значение z-index для текста. Потому что для слоя оно равно 0, что больше, чем -1.

Интерактивные демо-версии

Вот примеры на Codepen и repl.it, с которыми вы можете поэкспериментировать.

Блок «Обложка»

Блок «Обложка» отображает изображение или видео, поверх которого можно добавить текст и другое содержимое, что замечательно подходит для заголовков и элементов отображения в стиле баннера. В этом руководстве продемонстрировано, как использовать блок «Обложка» таким образом, чтобы ваша запись или страница выглядела элегантно и профессионально.

В этом руководстве

1. Обучающее видео
2. Добавление блока «Обложка»
3. Выбор изображения
4. Выбор блока «Обложка»
   1. Советы по выбору изображения
   1. Выравнивание
   2. Расположение содержимого
   3. Выравнивание по всей высоте
   4. Применение двухцветного фильтра
   5. Показ избранного изображения в блоке «Обложка»
   6. Замена изображения
   1. Стили
   2. Фиксированный фон
   3. Повторяющийся фон
   4. Средство выбора точки фокуса
   5. Альтернативный текст
   6. Очистка медиафайлов
   7. Цвет наложения
   8. Непрозрачность
   9. Настройки оформления
   10. Размеры

   Обучающее видео

   

   Вы можете ознакомиться с подробными инструкциями по добавлению блоков.

   Выбор изображения

   После вставки блока у вас будет две опции, чтобы задать изображение или видео: Загрузить и Выбрать медиафайлы:

   1. Нажмите Загрузить , чтобы добавить новое изображение или видео со своего устройства.
   2. Нажмите Выбрать медиафайл, чтобы выбрать изображение или видео на сайте, в Google Фото, библиотеке бесплатных фотографий Pexels или Openverse.

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

   Или же с помощью цветных кругов можно указать цвет фона для обложки. Позже этот цвет можно изменить в настройках блока.

   Выбор блока «Обложка»

   После добавления блока «Обложка» его можно выбрать в виде списка, чтобы повторно открыть его панель инструментов и панель настроек на боковой панели справа:

   

   Среди этих опций:

   • Изменение типа блока.
   • Перетаскивание блока.
   • Перемещение блока выше или ниже.
   • Выравнивание изображения (по левому краю, правому краю или центру; а также «Широкий формат» и «Формат во всю ширину», если они поддерживаются темой)
   • Изменение расположения содержимого
   • По всей высоте
   • Применение двухцветного фильтра
   • Использование избранных изображений
   • Замена текущего изображения другим
   • Дополнительные опции

   Выравнивание

   Подобно другим блокам с помощью панели инструментов блок «Обложка» можно выровнять по левому или правому краю либо по центру. При выравнивании по левому или правому краю рядом с блоком «Обложка» можно разместить другой блок.

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

   

   Расположение содержимого

   Используйте функцию «Расположение содержимого», чтобы настроить расположение текста и другого содержимого на изображении:

   

   Выравнивание по всей высоте

   Чтобы изображение всегда полностью отображалось в высоту, вы можете активировать опцию По всей высоте на панели инструментов блока, которая появляется, когда вы её щёлкаете.

   

   Применение двухцветного фильтра

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

   

   Чтобы задать собственные цвета, используйте точки на панелях цветов:

   

   Показ избранного изображения в блоке «Обложка»

   Используйте блок «Обложка», если вы хотите, чтобы избранное изображение автоматически отображалось в верхней части записи или страницы.

   

   1. Добавьте избранное изображение в свою запись или на страницу.
   2. Чтобы добавить Блок «Обложка», щёлкните значок + Вставка блока или введите «/обложка» в новую строку и нажмите Enter.
   3. На панели инструментов блока «Обложка» щёлкните Добавить медиафайлы, а затем — Использовать избранное изображение. После этого автоматически подтянется текущее избранное изображение и будет добавлено в блок «Обложка».

   Замена изображения

   Это ещё одна опция панели инструментов блока «Обложка», которая появляется после добавления начального изображения или видео. Функция Заменить позволяет выбрать новый медиафайл для блока «Обложка».

   

   Стили

   Чтобы добавить эффект волны в нижней или верхней части изображения обложки, используйте раздел «Стили» в настройках блока «Обложка».

   

   Фиксированный фон

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

   Эту функцию, также известную как «эффект параллакса», можно отключить на некоторых мобильных устройствах, чтобы улучшить работу страницы.

   Повторяющийся фон

   Опция «Повторяющийся фон» позволяет повторять одно и то же изображение для формирования паттерна в блоке «Обложка». Например, вы можете включить эту опцию, если у вас есть небольшое изображение воздушного шара и вы хотите, чтобы оно повторялось несколько раз в блоке «Обложка». Результат будет выглядеть следующим образом:

   

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

   Вы можете использовать переключатель для опции «Повторяющийся фон» в сочетании с опцией «Фиксированный фон», но включение последней при этом не обязательно. Попробуйте «поиграть» с этими настройками, чтобы найти вариант, соответствующий вашим требованиям.

   Средство выбора точки фокуса

   Если опция «Фиксированный фон» выключена, вы увидите средство выбора точки фокуса. Оно позволяет определить и выделить главный объект на снимке. Щёлкните средство выбора, чтобы перетащить его в нужное расположение, либо задайте положение вручную с помощью значений в процентах.

   Альтернативный текст

   В текстовом поле можно ввести альтернативное текстовое описание, которое необходимо для доступности и поисковой оптимизации.

   Очистка медиафайлов

   Чтобы очистить обложку и использовать сплошной цветной фон, нажмите «Очистить медиафайлы», как указано ниже:

   

   Цвет наложения

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

   

   Непрозрачность

   Этот ползунок позволяет установить уровень непрозрачности наложения для изображения обложки. При перемещении ползунка в сторону значения 100 наложение становится более тёмным и непрозрачным, а при перемещении в сторону значения 0 ― более светлым и прозрачным. При значении непрозрачности 100 наложение становится полностью непрозрачным, а изображение обложки — невидимым. При значении непрозрачности 0 наложение полностью исчезает, оставляя видимым только изображение.

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

   Настройки оформления

   Внешний вид текста в блоке можно изменить с помощью следующих настроек.

   Если настройка не отображается, щёлкните три точки справа от элемента Настройки оформления (как показано справа). Затем можно выбрать необходимую опцию:

   • Размер шрифта
   • Семейство шрифтов
   • Внешний вид
   • Высота строки
   • Оформление
   • Регистр
   • Интервалы

   

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

   Кроме того, можно указать конкретное значение, щёлкнув значок слайдера над опциями по умолчанию (он отмечен цифрой 1 на снимке экрана ниже). Вы можете изменить единицы измерения, щёлкнув в области, отмеченной цифрой 2 на снимке экрана ниже. Можно выбрать пиксели, em или rem .

   

   С помощью параметра Семейство шрифтов можно изменить стиль шрифта. Выберите нужный шрифт из списка в выпадающем меню.

   С помощью параметра Внешний вид можно изменить стиль текста (обычный или курсив), а также его толщину — от тонкого до очень жирного.

   Параметр Высота строки задаёт интервал над текстом и под ним. При выборе значения «ноль» обязательно проверьте свой сайт на мобильном устройстве.

   Параметр Оформление содержит опции подчёркивания и перечёркивания.

   С помощью параметра Регистр можно изменять регистр текста: все прописные буквы, заглавная первая буква или все буквы строчные.

   Параметр Интервалы задаёт интервал между всеми знаками в тексте. Значение единицы измерения по умолчанию (пиксели) можно изменить на проценты, em , rem , vw и vh . Дополнительные сведения об относительных единицах можно найти здесь.

   Размеры

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

   Вы также можете добавить отступ, чтобы увеличить пространство вокруг содержимого блока «Обложка».

   Видео в блоке «Обложка»

   Эта функция доступна для сайтов с тарифными планами WordPress.com Premium, Business и eCommerce. Если на вашем сайте действует один из устаревших тарифных планов, этот раздел доступен для плана Pro.

   В блоке «Обложка» можно использовать видео. Оптимальный результат достигается при работе с видео в формате .mp4, однако вы можете загружать свои видео в других форматах. Ознакомьтесь со списком допустимых форматов.

   Обратите внимание, что блок «Обложка» не воспроизводит звук видеофайла. Если нужно, чтобы видео было со звуком, используйте блок «Видео».

   Вставьте блок «Обложка» обычным способом, но вместо выбора изображения добавьте видео. Затем вы можете выбрать видео, которое хотите вставить, и отрегулировать настройки ширины блока по своему усмотрению.

   Теперь вы можете добавить любой текст или кнопки поверх видео на обложке.

   Дополнительно

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

   Читать:

   Как отключить фоновые приложения на xiaomi