Как сделать, чтобы пнгэшка работала фоном для тега input?
Сделал макет в фигме и теперь я не могу разобраться с кодом. нужно чтобы та картинка которая должна служить в виде фона для тега input
<img src="public/external/rectangle5input120-3co-200h.png" alt="Rectangle5input120" class="android-large2-rectangle5input" /> <img src="public/external/rectangle6input121-6g61n-200h.png" alt="Rectangle6input121" class="android-large2-rectangle6input" /> <img src="public/external/rectangle4input119-vasy-200h.png" alt="Rectangle4input119" class="android-large2-rectangle4input" /> |
<img src="public/external/rectangle5input120-3co-200h.png" alt="Rectangle5input120" class="android-large2-rectangle5input" /> <img src="public/external/rectangle6input121-6g61n-200h.png" alt="Rectangle6input121" class="android-large2-rectangle6input" /> <img src="public/external/rectangle4input119-vasy-200h.png" alt="Rectangle4input119" class="android-large2-rectangle4input" />
нужно чтобы она не искажалась
Дополнительно:
Только вот непонятно зачем именно делать это картинкой....
Ну если должен выглядеть так как на фото,то просто
background-color: gray; ну или по коду смотришь в фигме
Ответы:
Это лучше сделать через css
В селектор для нужного input следующий добавь код:
background: url("*url картинки*")
Можно сделать и через костыли, например обернуть пару input + img в какой-нибудь div, ему указать:
position: relative;
а затем указать для img:
position: absolute; top: 0; left: 0; |
position: absolute; top: 0; left: 0;
- Правда в случае костыльного варианта возникнет проблема с перекрытием контента, в таком случае придётся заморочиться ещё и с z-index, а так же указать для input
background: transparent; - ARCHXTEKK,
1. Проще pointer-events: none
2. Вместо абсолюта - гриды.
3. Но вы правы в том, что фоновая картинка это украшение и делается через css, а не вставляется как img в разметку.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы установить изображение в качестве фона для тега input, можно использовать следующий CSS код:
input { background-image: url('путь_к_изображению.png'); background-size: cover; background-repeat: no-repeat; padding: 10px; /* добавляем отступы, чтобы текст не налазил на изображение */ }
В данном коде мы устанавливаем изображение в качестве фона для всех тегов input на странице. Свойство background-image принимает значение пути к изображению. С помощью background-size: cover; мы устанавливаем, чтобы изображение занимало всю доступную площадь input, а с помощью background-repeat: no-repeat; мы запрещаем повторение изображения.
Также можно добавить отступы с помощью свойства padding, чтобы текст не налазил на изображение.
Не забудьте заменить 'путь_к_изображению.png' на путь к вашему изображению.