Задать вопрос
By_Engine
@By_Engine

Как сделать рамку картинке на CSS?

Есть такой dom
<div class="img-border">
   <img src="">
</div>

Не знаю как реализовать рамку к картинке. Она находится за изображением, а нужно на переднем плане. Нужно как то реализовать без позиционирования. Как это сделать?

Рамка такого вида
.img-border {
   background:
        url('/1.png') no-repeat 100% 100%,
        url('/2.png') no-repeat 0 100%,
        url('/3.png') repeat-x 0 100%,
        .... N repeat;
}
  • Вопрос задан
  • 2609 просмотров
Подписаться 1 Оценить Комментировать
Помогут разобраться в теме Все курсы
  • Яндекс Практикум
    Профессиональная вёрстка на HTML и CSS
    3 месяца
    Далее
  • Stepik
    Основы HTML и CSS
    2 недели
    Далее
  • OTUS
    HTML/CSS
    3 месяца
    Далее
Пригласить эксперта
Ответы на вопрос 3
@archelon
псевдоэлементы :before и :after не пробовали использовать?
Ответ написан
gwenn
@gwenn
.img-border {
    border: 1px solid #333;
}

Как-то так.
Ответ написан
Комментировать
@BelkinVadim
Frontend разработчик
Если рамку вы делаете посредством фоновых картинок,
.img-border {
   background:
        url('/1.png') no-repeat 100% 100%,
        url('/2.png') no-repeat 0 100%,
        url('/3.png') repeat-x 0 100%,
        .... N repeat;
}

То доп.элементами поверх картинки можно, а проще как посоветовал archelon, через псевдоэлементы.
Через position: absolute растяните по контейнеру .img-border, через z-index поместите на передний план поверх изображения.
У .img-border установите position: relative
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Похожие вопросы