Наложение поля формы фиксированного размера на изображение фиксированного размера

Question

Наложение поля формы фиксированного размера на изображение фиксированного размера

0

У меня есть изображение, которое фиксирует себя до 100% ширины страницы. Он остается того же размера (на экране) независимо от того, какое изменение размера пользователь делает в своем браузере.

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

Вот мой текущий CSS:

.fixedimage img{
    width:100% !important;
    height:auto;
    display:block;
}

Вот мой текущий HTML:

<TABLE WIDTH="100%" CELLPADDING="0" CELLSPACING="0" BORDER="0">
<TR>
<TD WIDTH="100%">
<div class="fixedimage">
<center><img src="FixedImage.jpg"></center>
</div>
</TD>
</TR>
</TABLE>

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

Спасибо за вашу помощь!

user3161669 05 янв. 2014, в 03:52

Источник

1

Центральная метка устарела, я бы предложил использовать что-то еще.
BuddhistBeast 05 янв. 2014, в 02:38
0

Установите фоновое изображение контейнера и добавьте html части формы в контейнер. Это даст вам запрошенный вывод.
Zword 05 янв. 2014, в 02:38
0

Я бы предположил, что табличный дизайн также не рекомендуется. Вы найдете много трудностей в создании адаптивного дизайна, как вам кажется, при использовании таблиц. Также, пожалуйста, не пишите заглавными буквами имена или атрибуты.
Micah Henning 05 янв. 2014, в 05:38

Показать ещё 1 комментарий

Теги:

html

css

1 ответ

Ещё вопросы

Центральная метка устарела, я бы предложил использовать что-то еще.
Установите фоновое изображение контейнера и добавьте html части формы в контейнер. Это даст вам запрошенный вывод.
Я бы предположил, что табличный дизайн также не рекомендуется. Вы найдете много трудностей в создании адаптивного дизайна, как вам кажется, при использовании таблиц. Также, пожалуйста, не пишите заглавными буквами имена или атрибуты.

Zword · Accepted Answer · 2014-01-05T01-17-00.000Z

0

Лучший ответ

Смотрите эту скрипку:

http://jsfiddle.net/nV7tP/1/

CSS:

.fixedimage{
    width:100% !important;
    height:auto;
    display:block;
    background:url(http://www.hdwallpaperspick.com/wp-content/uploads/2013/06/beautiful-autumn-scenery-723-2.jpg);
    background-position:50% 50%;
    background-size:cover;
}
.fixedimage form{
    width:100%;
    color:white;
    font-size:40px;
    text-align:center;
}
.fixedimage form input{
    width:250px;
    height:30px;
}

Ответ на комментарий ниже:

Попробуйте эту скрипту, чтобы показать весь фоновый рисунок:

http://jsfiddle.net/nV7tP/2/

.fixedimage{
    position:absolute;
    width:100% !important;
    height:auto;
    display:block;
    font-size:40px;
}
.fixedimage img{
    position:absolute;
}
.fixedimage form{
    position:absolute;
    width:100%;
    color:white;
    text-align:center;
}
.fixedimage form input{
    width:250px;
    height:30px;
}

Примечание. Было бы лучше, если бы вы использовали CSS с первым опубликованным скриптом. Его тип CSS в основном используется на современных популярных сайтах.

Установите ширину изображения на 100%. Это даст результат, который вы задали:

Смотрите эту скрипту: http://jsfiddle.net/nV7tP/5/

или если вы хотите контейнер с минимальной шириной, см. это http://jsfiddle.net/nV7tP/6/.

Zword 05 янв. 2014, в 01:17

0

Спасибо. Тем не менее, 2 вопроса:
user3161669 05 янв. 2014, в 04:49
0

1. Теперь кажется, что отображается только часть контейнера / фонового изображения, а не все. Он показывает только часть вокруг формы, так как теперь это фоновое изображение.
user3161669 05 янв. 2014, в 04:50
0

2. Когда я увеличиваю или уменьшаю масштаб с помощью моего браузера, он теперь уменьшает размер текста вокруг поля формы. Я ищу что-то, что остается большим, как и само фоновое изображение. Я надеюсь, что это проясняет то, что я пытаюсь сделать. Спасибо большое за вашу помощь!!!
user3161669 05 янв. 2014, в 04:51
0

Вы хотите, чтобы ваш текст был отзывчивым?
Zword 05 янв. 2014, в 04:52
0

Я не полный разработчик, но да, я верю, что это так. По сути, изображение, которое я использую, имеет небольшую область шириной около 300 пикселей и высотой 200 пикселей, которая достаточно четкая для вставки таблицы с запросом имени. Следовательно, точность является ключевым фактором. Если кто-то увеличит или уменьшит масштаб своего браузера или если он не совсем в этой области, он не будет выглядеть правильно.
user3161669 05 янв. 2014, в 05:02
0

Может быть, то, что я пытаюсь сделать, невозможно с текстом. Я не уверен.
user3161669 05 янв. 2014, в 05:04
0

@ user3161669 Я предлагаю вам использовать первый скриптовый CSS, который я разместил.
Zword 05 янв. 2014, в 05:05
0

Хорошо спасибо. Текст по-прежнему изменяется по мере увеличения / уменьшения масштаба пользователем, но, возможно, это навязывается тексту браузерами. В любом случае, благодарю Вас!
user3161669 05 янв. 2014, в 05:14
0

Примите мой ответ, если это помогло
Zword 05 янв. 2014, в 05:16
0

Хорошо, я сделал это Последний вопрос ... если я использую скрипку 1, то есть ли способ, чтобы изображение показывало всю его высоту? Скрипка 2 не соответствует ширине изображения.
user3161669 05 янв. 2014, в 05:24
0

О хорошо Я не хочу этого делать. Так что просто для подтверждения ... нет способа показать изображение с фиксированной шириной 100% размера экрана (высота регулируется на основе ширины), а затем наложить поверх поля формы поверх этого?
user3161669 05 янв. 2014, в 05:32
0

Я могу сделать это с помощью CSS. Подождите минуту. Я обновлю свой ответ
Zword 05 янв. 2014, в 05:33
0

Звучит здорово!!!
user3161669 05 янв. 2014, в 05:33
0

Проверьте третью скрипку, если это то, что вы хотите
Zword 05 янв. 2014, в 05:35
0

Это работает!!! Спасибо!!!
user3161669 05 янв. 2014, в 05:39
0

Извините, что беспокою вас. Еще один вопрос. Похоже, что изображение bg уменьшается до 100% от высоты изображения bg. Тем не менее, содержимое под таблицей и структура div помещаются под изображением bg в div. Другими словами, текст, который я имею после этого раздела (в коде HTML), не отображается, потому что он скрыт под изображением bg. Странно, почему это происходит
user3161669 05 янв. 2014, в 05:44
0

Попробуйте использовать z-index:100; свойство css для элемента формы, содержащего текст.
Zword 05 янв. 2014, в 07:22
0

Большое спасибо!
user3161669 05 янв. 2014, в 08:12

Показать ещё 16 комментариев