Как добавить фоновую картинку в html
Перейти к содержимому

Как добавить фоновую картинку в html

  • автор:

Фоновая картинка

В качестве фона можно использовать любое подходящее для этого изображение в формате GIF, JPEG, PNG и даже SVG. Правильно подобранный фон не отвлекает внимание от текста, хорошо сочетается с цветовой гаммой веб-страницы, при этом файл с фоном желательно должен быть небольшим по объёму, чтобы быстро загружаться.

Свойство background

Универсальное свойство background позволяет задать одновременно цвет фона, фоновое изображение, устанавливает положение рисунка, указывает, фиксировать фон или нет, а также определяет, как будет повторяться изображение. Так, если требуется поместить фоновую картинку в правый верхний угол без дублирования, как показано на рис. 1, следует воспользоваться кодом, приведённым в примере 1.

Вид страницы с фоновым рисунком

Рис. 1. Вид страницы с фоновым рисунком

Пример 1. Добавление фонового рисунка

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

Повторение фона

Если просто добавить фоновую картинку, то она будет повторяться одновременно по горизонтали и вертикали. Это поведение может быть изменено с помощью свойства background-repeat или универсального background . Есть три значения:

  • no-repeat — фон не повторяется; применяется для простого добавления единственной картинки;
  • repeat-x — фон повторяется по горизонтали;
  • repeat-y — фон повторяется по вертикали.

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

  • занимать по высоте не меньше 20–30 пикселей;
  • при стыковке с аналогичным фрагментом изображения по вертикали не должно быть видимых стыков.

Поясним про высоту фоновой картинки. Если сделать изображение слишком узким (2–3 пикселя), то при отображении фона эффект его появления будет виден невооружённым глазом. Увеличение высоты позволяет замостить фон элемента быстро и незаметно.

В качестве образца фона возьмём узор, показанный на рис. 2.

Фоновая картинка

Рис. 2. Фоновая картинка

В примере 2 показано добавление фона на веб-странице с повторением его по вертикали. Чтобы текст не выводился поверх рисунка к селектору body добавлено поле слева.

Пример 2. Повторение фона по вертикали

Результат данного примера показан на рис. 3.

Вид фона, повторяющегося по вертикали

Рис. 3. Вид фона, повторяющегося по вертикали

Аналогично делается и повторение по горизонтали. Предварительно готовим подходящее изображение, затем добавляем его фоном к элементу через background и включаем повторение repeat-x (пример 3).

Пример 3. Повторение фона по горизонтали

Результат данного примера показан на рис. 4.

Вид фона, повторяющегося по горизонтали

Рис. 4. Вид фона, повторяющегося по горизонтали

Положение фона

Для управления положением фонового рисунка на странице применяется стилевое свойство background-position , оно одновременно устанавливает координаты изображения по горизонтали и вертикали. Чтобы отменить повторение фоновой картинки используется значение no-repeat . Также можно воспользоваться универсальным background , как показано в примере 4.

Пример 4. Положение фона

Положение фонового рисунка

Консервы из помидор

Плоды отбирают с хорошей ровной окраской, плотные и однородные по размеру, укладывают в банки и заливают кипящим рассолом (на 1 л воды — 35 г поваренной соли и 6 г лимонной кислоты). Банки прикрывают крышками и ставят на прогревание, выдерживая в кипящей воде: литровые — 5-8, трехлитровые — 12-15 мин. Затем их укупоривают и охлаждают.

Примерный расход сырья и продуктов на литровую банку: помидоров красных отборных — 550-600 г, соли — 15 г, лимонной кислоты — 3 г.

Результат данного примера показан на рис. 5. Изображение позиционируется в нужном месте с помощью значений right bottom свойства background . Чтобы текст не отображался поверх рисунка, справа на странице добавлен отступ через margin-right .

Фоновая картинка в правом нижнем углу окна

Рис. 5. Фоновая картинка в правом нижнем углу окна

Точное положение фона задаётся с помощью пикселей, но в основном применяется процентная запись или ключевые слова, как показано ниже:

  • top left = left top = 0% 0% (в левом верхнем углу);
  • top = top center = center top = 50% 0% (по центру вверху);
  • right top = top right = 100% 0% (в правом верхнем углу);
  • left = left center = center left = 0% 50% (по левому краю и по центру);
  • center = center center = 50% 50% (по центру);
  • right = right center = center right = 100% 50% (по правому краю и по центру);
  • bottom left = left bottom = 0% 100% (в левом нижнем углу);
  • bottom = bottom center = center bottom = 50% 100% (по центру внизу);
  • bottom right = right bottom = 100% 100% (в правом нижнем углу).

Таким образом, для добавления фона в правый нижний угол для background-position можно указать значение right bottom или bottom right или 100% 100% . Они равнозначны и дают одинаковый результат.

Фиксация фона

При прокрутке страницы фоновая картинка также прокручивается вместе с содержимым. Если применяется повторение фона, то это не вызовет никаких проблем, но при единственном изображении и большом объёме текста может оказаться так, что фон передвинется за верхний край. Чтобы такого не происходило фоновое изображение фиксируется на месте и не перемещается вместе с остальным содержимым документа. Для этого применяется свойство background-attachment со значением fixed или всё то же свойство background (пример 4).

У fixed есть ещё одна особенность. Если мы добавляем картинку к селектору body , то она располагается не внизу окна браузера, а внизу блока с контентом, что особенно заметно при небольшом объёме текста или увеличении размеров окна браузера. Фиксированный фон привязывается именно к окну и уже не зависит от объёма контента.

См. также

  • background
  • background-attachment
  • background-position
  • background-repeat
  • Атрибут bgproperties
  • Линейный градиент
  • Несколько фоновых картинок
  • Спрайты
  • Установка фона и градиента
  • Фон в CSS

Как сделать фоновую картинку в HTML

Верстка HTML и CSS

На чтение 3 мин Просмотров 964 Опубликовано 01 марта 2023

Изображения могут придать странице более привлекательный вид. Одним из таких способов сделать страницу более привлекательной является добавление на нее фонового изображения. Добавить фоновое изображение в HTML можно двумя способами: атрибутом Background (HTML) или через CSS. Но прежде чем мы начнем изучать различные методы добавления фонового изображения в HTML, давайте пройдемся по списку тем, перечисленных в оглавлении, которые мы рассмотрим в этой статье.

Как добавить фоновое изображение в HTML

Добавить фоновое изображение в HTML можно двумя способами:

  • Атрибут Background (HTML)
  • Внутренняя таблица стилей (CSS)

Давайте подробно рассмотрим каждый из этих методов в следующем разделе.

Атрибут фона

Если вы хотите добавить фоновое изображение в HTML с помощью атрибута background, выполните следующие действия:

  • Откройте HTML-файл в текстовом редакторе.
  • В начальном теге вашего HTML-файла введите .
  • Укажите путь к изображению, которое мы хотим добавить. (например, .
  • Сохраните HTML-файл в текстовом редакторе и запустите его.

Давайте рассмотрим пример, чтобы лучше понять шаги. Вот HTML-файл:

HTML код

Когда вы выполните этот код, результат будет выглядеть следующим образом:

Пример кода

“C:\Users\Downloads\infoedge.jpg”, это путь к изображению, где оно было сохранено на устройстве. Замените путь в соответствии с расположением файла, сохраненного на вашем устройстве. А если вы хотите добавить изображение из интернета, используйте для этого URL-адрес изображения.

Внутренняя таблица стилей (CSS)

Если вы хотите добавить фоновое изображение с помощью внутренней таблицы стилей (CSS), выполните следующие действия:

  • Откройте HTML-файл в текстовом редакторе.
  • После закрытия тега в HTML-документе определите начальный и конечный теги тега .Введите в тег style свойство элемента body , а затем свойство backgroud-image .
  • Сохраните HTML-файл в текстовом редакторе и запустите его.

Давайте рассмотрим пример, чтобы лучше понять шаги. Вот HTML-файл, созданный в соответствии с приведенными выше шагами:

Код HTML

Когда вы выполните этот код, результат будет выглядеть следующим образом:

Результат вывода кода

В приведенном выше HTML-коде мы использовали изображение из Интернета, используя URL-адрес изображения.

Как повторить фоновое изображение в HTML?

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

Повторение фонового изображения в HTML

Если вы не хотите, чтобы фоновое изображение повторялось, установите свойство background no-repeat .

Как покрыть весь элемент фоновым изображением в HTML?

Чтобы покрыть фоновым изображением весь элемент, можно установить свойство background-size в значение cover . А если вы не хотите, чтобы изображение растягивалось, можно задать свойству background-attachment значение fixed . Это позволит охватить весь элемент или страницу без растягивания.

Давайте рассмотрим пример, чтобы лучше понять это:

Код HTML

На выходе получится примерно следующее:

Изображение в HTML, которое покрывает весь элемент

В этой статье мы рассмотрим, как добавить фоновое изображение в HTML. Если остались вопросы, задавайте их в комментариях ниже.

Как я могу переместить картинку на моей HTML-странице?

У меня есть картинка, и мне нужно переместить ее под словом с тире, но я не могу это сделать по какой-то причине он не хочет поднимать эту иконку и теперь я добавляю другие, а он ставит их еще ниже код:

введите сюда описание изображения

весь код:

  текст  body  

Подпишись

Отслеживать

ДОБРЫЙ ДЕДУШКА

задан 21 июл 2019 в 16:22

ДОБРЫЙ ДЕДУШКА ДОБРЫЙ ДЕДУШКА

25 1 1 золотой знак 1 1 серебряный знак 4 4 бронзовых знака

Эффекты при наведении на картинку CSS

Эффекты при наведении на картинку CSS

Подборка Hover эффектов при наведении на картинку CSS. Здесь вы найдете эффекты для галереи, эффекты с появлением текста или иконок, рамки и многие другие интересные эффекты для сайта.

Красивое вращение картинки при наведении CSS

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

Пример

HTML

  

CSS

 .beauty-rotate < width: 300px; height: 300px; border: 4px double #bd6c46; /* Рамка */ overflow: hidden; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; >.beauty-rotate:hover

Разворот картинки при наведении CSS

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

Пример

HTML

  

CSS

 /* Блок картинки */ .rotate-block < width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; >/* Изображение */ .change-img < width: 300px; height: 300px; position: relative; perspective: 1000px; border: 1px solid #d68360; /* Рамка */ >.change-img:hover .front-side-img < transform: rotateY(180deg); >.change-img:hover .back-side-img < transform: rotateY(360deg); >/* Стороны изображения */ .front-side-img, .back-side-img < position: absolute; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; transition: 1s; back-side-imgface-visibility: hidden; >.front-side-img img < max-width: 100%; min-width: 100%; height: auto; >.back-side-img img < max-width: 100%; min-width: 100%; height: auto; transform: scaleX(-1);/* Отражаем изображение по горизонтали */ >.back-side-img

Поворот картинки при наведении CSS

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

Пример

HTML

  

CSS

 img.small-rotate < -webkit-transition: all 1s ease; transition: all 1s ease; >img.small-rotate:hover < -webkit-transform: rotate(15deg); /* Градусы поворота можно изменить по необходимости */ transform: rotate(15deg); /* Градусы поворота можно изменить по необходимости */ >

Вращение картинки при наведении CSS

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

Пример

HTML

  

CSS

 img.rotate-img < border-radius: 50%; -webkit-transition: -webkit-transform .8s ease-in-out; transition: transform .8s ease-in-out; >img.rotate-img:hover < -webkit-transform: rotate(360deg); /* Градусы поворота можно изменить по необходимости */ transform: rotate(360deg); /* Градусы поворота можно изменить по необходимости */ >

Рамка внутри блока или картинки при наведении

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

Пример

HTML

  

CSS

 img:hover < outline: 2px dashed #3d1f15; /* Ширина, вид и цвет рамки */ outline-offset: -10px; /* Выводим рамку внутри элемента */ >

Рамка к изображению при наведении

Такая рамка может пригодиться в галерее, а так же если нужно выделить то или иное изображение при наведении. Рамка вокруг изображений делается с помощью свойства border, которое добавляется к селектору img. Чтобы рамка появлялась только при наведении курсора мыши на картинку, следует воспользоваться псевдоклассом :hover.

Пример

HTML

  

CSS

 img:hover < border: 3px solid #413f3f; /* Ширина, вид и цвет рамки */ >

Эффект при наведении на картинку с текстом CSS

Эффекты при наведении на картинку с появлением и подчеркиванием заголовка. Для удобства копирования в каждую вкладку CSS добавлены общие стили. Эти эффекты можно использовать для галереи и для карточек товаров.

Пример

HTML

   

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit

CSS 1

 /* Общие стили */ *, *:after, *:before < border-box; box-sizing: border-box; >.clearfix:before, .clearfix:after < content: ''; display: table; >.clearfix:after < clear: both; >.hover-text-one < overflow: hidden; margin: 0; width: 100%; list-style: none; text-align: center; >.hover-text-one figure < position: relative; z-index: 1; display: inline-block; overflow: hidden; background: #527c82; text-align: center; cursor: pointer; >.hover-text-one figure img < position: relative; display: block; min-height: 100%; opacity: 0.8; >.hover-text-one figure figcaption < padding: 2em; color: #fff; text-transform: uppercase; font-size: 1.25em; -webkit-backface-visibility: hidden; backface-visibility: hidden; >.hover-text-one figure figcaption::before, .hover-text-one figure figcaption::after < pointer-events: none; >.hover-text-one figure figcaption < position: absolute; top: 0; left: 0; width: 100%; height: 100%; >.hover-text-one figure h3 < word-spacing: -0.15em; font-weight: 300; >.hover-text-one figure h3 span < font-weight: 800; >.hover-text-one figure h3, .hover-text-one figure p < margin: 0; >.hover-text-one figure p < letter-spacing: 1px; font-size: 68.5%; >/* Эффект при наведении */ figure.effect-text-three < background: #527c82; >figure.effect-text-three img < width: -webkit-calc(100% + 20px); width: calc(100% + 20px); -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; transform: scale(1.1); -webkit-backface-visibility: hidden; backface-visibility: hidden; >figure.effect-text-three:hover img < opacity: 0.4; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); >figure.effect-text-three figcaption < text-align: left; >figure.effect-text-three h3 < position: relative; overflow: hidden; padding: 0.5em 0; >figure.effect-text-three h3::after < position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background: #fff; content: ''; -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s; -webkit-transform: translate3d(-100%,0,0); transform: translate3d(-100%,0,0); >figure.effect-text-three:hover h3::after < -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); >figure.effect-text-three p < padding: 1em 0; opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0); >figure.effect-text-three:hover p

CSS 2

 /* Общие стили */ *, *:after, *:before < border-box; box-sizing: border-box; >.clearfix:before, .clearfix:after < content: ''; display: table; >.clearfix:after < clear: both; >.hover-text-one < overflow: hidden; margin: 0; width: 100%; list-style: none; text-align: center; >.hover-text-one figure < position: relative; z-index: 1; display: inline-block; overflow: hidden; background: #527c82; text-align: center; cursor: pointer; >.hover-text-one figure img < position: relative; display: block; min-height: 100%; opacity: 0.8; >.hover-text-one figure figcaption < padding: 2em; color: #fff; text-transform: uppercase; font-size: 1.25em; -webkit-backface-visibility: hidden; backface-visibility: hidden; >.hover-text-one figure figcaption::before, .hover-text-one figure figcaption::after < pointer-events: none; >.hover-text-one figure figcaption < position: absolute; top: 0; left: 0; width: 100%; height: 100%; >.hover-text-one figure h3 < word-spacing: -0.15em; font-weight: 300; >.hover-text-one figure h3 span < font-weight: 800; >.hover-text-one figure h3, .hover-text-one figure p < margin: 0; >.hover-text-one figure p < letter-spacing: 1px; font-size: 68.5%; >/* Эффект при наведении */ figure.effect-text-four figcaption < text-align: right; >figure.effect-text-four h3, figure.effect-text-four p < position: absolute; right: 30px; left: 30px; padding: 10px 0; >figure.effect-text-four p < bottom: 30px; line-height: 1.5; -webkit-transform: translate3d(0,100%,0); transform: translate3d(0,100%,0); >figure.effect-text-four h3 < top: 30px; -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s; -webkit-transform: translate3d(0,20px,0); transform: translate3d(0,20px,0); >figure.effect-text-four:hover h3 < -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); >figure.effect-text-four h3::after < position: absolute; top: 100%; left: 0; width: 100%; height: 4px; background: #fff; content: ''; -webkit-transform: translate3d(0,40px,0); transform: translate3d(0,40px,0); >figure.effect-text-four h3::after, figure.effect-text-four p < opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; >figure.effect-text-four:hover h3::after, figure.effect-text-four:hover p

Эффекты при наведении на картинку с текстом CSS

Два эффекта при наведении на картинку с появлением текста. Для удобства копирования в каждую вкладку CSS добавлены общие стили. Эти эффекты можно использовать для галереи и для карточек товаров.

Пример

HTML

   

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit

CSS 1

 /* Общие стили */ *, *:after, *:before < border-box; box-sizing: border-box; >.clearfix:before, .clearfix:after < content: ''; display: table; >.clearfix:after < clear: both; >.hover-text-one < overflow: hidden; margin: 0; width: 100%; list-style: none; text-align: center; >.hover-text-one figure < position: relative; z-index: 1; display: inline-block; overflow: hidden; background: #527c82; text-align: center; cursor: pointer; >.hover-text-one figure img < position: relative; display: block; min-height: 100%; opacity: 0.8; >.hover-text-one figure figcaption < padding: 2em; color: #fff; text-transform: uppercase; font-size: 1.25em; -webkit-backface-visibility: hidden; backface-visibility: hidden; >.hover-text-one figure figcaption::before, .hover-text-one figure figcaption::after < pointer-events: none; >.hover-text-one figure figcaption < position: absolute; top: 0; left: 0; width: 100%; height: 100%; >.hover-text-one figure h3 < word-spacing: -0.15em; font-weight: 300; >.hover-text-one figure h3 span < font-weight: 800; >.hover-text-one figure h3, .hover-text-one figure p < margin: 0; >.hover-text-one figure p < letter-spacing: 1px; font-size: 68.5%; >/* Эффект при наведении */ figure.effect-text-two figcaption::before < position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: -webkit-linear-gradient(top, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%); background: linear-gradient(to bottom, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%); content: ''; opacity: 0; -webkit-transform: translate3d(0,50%,0); transform: translate3d(0,50%,0); >figure.effect-text-two h3 < position: absolute; top: 50%; left: 0; width: 100%; color: #f66d52 !important; -webkit-transition: -webkit-transform 0.35s, color 0.35s; transition: transform 0.35s, color 0.35s; -webkit-transform: translate3d(0,-50%,0); transform: translate3d(0,-50%,0); >figure.effect-text-two figcaption::before, figure.effect-text-two p < -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; >figure.effect-text-two p < position: absolute; bottom: 0; left: 0; padding: 2em; width: 100%; opacity: 0; -webkit-transform: translate3d(0,10px,0); transform: translate3d(0,10px,0); >figure.effect-text-two:hover h3 < color: #fff; -webkit-transform: translate3d(0,-50%,0) translate3d(0,-40px,0); transform: translate3d(0,-50%,0) translate3d(0,-40px,0); >figure.effect-text-two:hover figcaption::before , figure.effect-text-two:hover p

CSS 2

 /* Общие стили */ *, *:after, *:before < border-box; box-sizing: border-box; >.clearfix:before, .clearfix:after < content: ''; display: table; >.clearfix:after < clear: both; >.hover-text-one < overflow: hidden; margin: 0; width: 100%; list-style: none; text-align: center; >.hover-text-one figure < position: relative; z-index: 1; display: inline-block; overflow: hidden; background: #527c82; text-align: center; cursor: pointer; >.hover-text-one figure img < position: relative; display: block; min-height: 100%; opacity: 0.8; >.hover-text-one figure figcaption < padding: 2em; color: #fff; text-transform: uppercase; font-size: 1.25em; -webkit-backface-visibility: hidden; backface-visibility: hidden; >.hover-text-one figure figcaption::before, .hover-text-one figure figcaption::after < pointer-events: none; >.hover-text-one figure figcaption < position: absolute; top: 0; left: 0; width: 100%; height: 100%; >.hover-text-one figure h3 < word-spacing: -0.15em; font-weight: 300; >.hover-text-one figure h3 span < font-weight: 800; >.hover-text-one figure h3, .hover-text-one figure p < margin: 0; >.hover-text-one figure p < letter-spacing: 1px; font-size: 68.5%; >/* Эффект при наведении */ figure.effect-text-one img < width: -webkit-calc(100% + 50px); width: calc(100% + 100px); opacity: 0.7; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; transform: scale(1.2); >figure.effect-text-one figcaption < top: auto; bottom: 0; height: 50%; text-align: left; >figure.effect-text-one h3, figure.effect-text-one p < -webkit-transform: translate3d(0,40px,0); transform: translate3d(0,40px,0); >figure.effect-text-one h3 < color: #f66d52 !important; -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s; >figure.effect-text-one p < background: rgba(0,0,0,0.6); color: #fff; padding: 10px; opacity: 0; -webkit-transition: opacity 0.2s, -webkit-transform 0.35s; transition: opacity 0.2s, transform 0.35s; >figure.effect-text-one:hover img, figure.effect-text-one:hover p < opacity: 1; >figure.effect-text-one:hover img, figure.effect-text-one:hover h3, figure.effect-text-one:hover p < -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); >figure.effect-text-one:hover p

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *