Css как вставить картинку: CSS: вписываем изображение в область — Блог

Leave a Comment / Css / By /

Как вставить фото в HTML, CSS, JS

Перейти к содержимому

ЗарегистрироватьсяВойти

Этот пост предназначен только для чтения. Изучайте Repls и общайтесь с другими авторами в Community.View Community

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

Мне нужно вставить фотографию в HTML, какой код мне нужно вставить, чтобы вставить фотографию?

3 года назад

Ответил HighwaymanView Ответ

Избирателей

BekasiTimur

Abillll

IekatierinaSkr1

NidaUlhasanah3

LucasDameron

AchmadFarel2

AniqNurhaziq

kiranaayaas

RoziahCedric

TopNew

Highwayman

ALTERNATIVE_TEXT where LINK — это URL-адрес или путь к фотографии, а ALTERNATIVE_TEXT — это текст, который должен отображаться вместо этого, если по какой-то причине изображение не может быть отображено.

3 года назад

Я дам тебе больше циклов!

3 года назад

Потому что я его создал

3 года назад

Спасибо 😀

3 года назад

Ты всегда здесь, пока я здесь 🙂

00 3 года назад Highway 3

лет назад

AisyahDinda

Неверный URL изображения

2 года назад

@Highwayman

Чем вы можете сказать мне код? https://repl.it/@Miner36number2/Социальная кампания

3 года назад

Разбойник

@Miner36number2

вы просто забыли поставить .png в конце. Таким образом, это будет png"> , а не

3 года назад

@Highwayman

Не могли бы вы скажите, можете ли вы преобразовать изображение, которое я создал, в URL или прямо в мой HTML? Спасибо

3 года назад

Разбойник

3 года назад

@Highwayman

Что делать, если у изображения нет URL-адреса?

3 года назад

Разбойник

@Miner36number2

тогда вы можете загрузить его на свой репл

И ссылайтесь на него, используя обычную относительную или абсолютную ссылку, как с файлами css или js.

3 года назад

@Highwayman

Спасибо, я забыл как это сделать :I0003

Как накладывать значки поверх изображений с помощью CSS

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

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

 
Видеоплеер
 

Наведите курсор, чтобы воспроизвести видео

<дел>
  

    <я>
  



  Красивое изображение
<дел>
Войти в полноэкранный режимВыйти из полноэкранного режима

Во-первых, давайте начнем с добавления стилей к странице и компонентам. 

 корпус {
 дисплей: гибкий;
 flex-направление: столбец;
 выравнивание содержимого: по центру;
 выравнивание элементов: по центру;
}
.изображение {
 ширина: 100%;
 высота: авто;
}
.оверлей {
 высота: 100%;
 ширина: 100%;
 непрозрачность: 0,3;
 переход: легкость .3s;
 цвет фона: прозрачный;
}
.container: наведение .overlay {
 непрозрачность: 0,7;
}
.play-значок {
 черный цвет;
 размер шрифта: 2rem;
 курсор: указатель;
}
.like-кнопка {
красный цвет;
размер шрифта: 20px;
курсор: указатель;
радиус границы: 10rem;
цвет фона: прозрачный;
граница: прозрачная;
}
.like-кнопка :hover {
красный цвет;
}
Войти в полноэкранный режимВыйти из полноэкранного режима

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

Шаг 1.

Назначьте позиции

Это самый важный шаг. Первый шаг — заключить компоненты вместе с изображением в один элемент и назначить свойство CSS 9.0041 позиция: относительная . А иконкам, которые нам нужно разместить на изображении, присваивается свойство position: absolute .
В этом случае мы добавляем класс .container(который содержит изображение и значки) position: relative

, а наложенным значкам назначается свойство position: absolute .
Ниже вы можете узнать больше о свойстве position в CSS.

Свойство CSS: Позиция

Шаг 2. При необходимости присвойте иконкам z-index выше изображения

В этом случае я назначаю z-index блоку иконок ( .overlay и .like-button ), который выше, чем у изображения, чтобы они накладывались на изображение. В некоторых случаях добавлять не требуется, если индексы компонентов по умолчанию соответствуют нашему требованию. Но не забудьте проверить и добавить.
Мы добавили позиции и z-индекс в приведенный ниже код. 

 корпус {
            дисплей: гибкий;
            flex-направление: столбец;
            выравнивание содержимого: по центру;
            выравнивание элементов: по центру;
        }
        .изображение {
            ширина: 100%;
            высота: авто;
        }
        .оверлей {
            положение: абсолютное;
            высота: 100%;
            ширина: 100%;
            непрозрачность: 0,3;
            переход: легкость .3s;
            цвет фона: прозрачный;
            сверху: 0;
            внизу: 0;
            слева: 0;
            справа: 0;
        }
        .контейнер {
            положение: родственник;
            ширина: 100%;
            максимальная ширина: 400 пикселей;
        }
        .overlay:наведите {
            непрозрачность: 0,7;
        }
        .play-значок {
            положение: абсолютное;
            черный цвет;
            размер шрифта: 2rem;
            курсор: указатель;
            слева: 50%;
            низ: 50%;
        }
        .

 fa-сердце {
            положение: абсолютное;
            z-индекс: 2;
            красный цвет;
            положение: абсолютное;
        }
Войти в полноэкранный режимВыйти из полноэкранного режима


Подробнее о z-индексе можно узнать здесь.

Шаг 3. Расположите значки соответствующим образом, используя другие свойства CSS.

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

 корпус {
            дисплей: гибкий;
            flex-направление: столбец;
            выравнивание содержимого: по центру;
            выравнивание элементов: по центру;
        }
        .изображение {
            ширина: 100%;
            высота: авто;
        }
        .оверлей {
            положение: абсолютное;
            высота: 100%;
            ширина: 100%;
            непрозрачность: 0,3;
            переход: легкость .