полноэкранный фон с кнопкой

Question

полноэкранный фон с кнопкой

0

Я пытаюсь создать полноэкранный html-шаблон, подобный этому изображению (в центре страницы):

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

мой код для полноэкранного изображения:

html, body ,form
{
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  min-height:100%
}
.fullscreen
{
  z-index: -999;
  height: 100%;
  position: fixed; 
  width:auto;
  padding: 0;
  margin: 0;
}

  <img src="source/fullscreen.jpg" class="fullscreen" />

как исправить эту проблему для всех размеров экрана только с помощью css? и центральное полноэкранное изображение?

Micle 27 окт. 2013, в 12:40

Источник

Теги:

html

css

fullscreen

3 ответа

Ещё вопросы

DOCTYPE HTML · Answer 1 · 2013-10-27T12-07-00.000Z

Попробуй это:

* {
margin: 0;
}
body {
background: url(img);
height: 100%;
width: 100%;
background-size: 100%;

}

Не используйте скрипт следующим образом:

.fullscreen
{
  z-index: -999;
  height: 100%;
  position: fixed; 
  width:auto;
  padding: 0;
  margin: 0;
}

  <img src="source/fullscreen.jpg" class="fullscreen" />

когда вы хотите установить фон...

Спасибо за воспроизведение, но когда используется background-image, изображение не масштабируется или не отображается полностью на экране во всех размерах экрана.
вот попробуйте это сейчас у меня есть редактировать мой ответ
еще раз спасибо, фоновое полноэкранное изображение в порядке, но когда позиция кнопки в точке человека с размером экрана по умолчанию, то размер экрана изменился: кнопка получает другую позицию!
Вы хотите создать прозрачную кнопку на изображении, где кнопки?
Кнопки да прозрачны и способны нажимать, в некоторых положениях, например, как мужской палец.
Хорошо, я позабочусь о твоей проблеме. Но его Ночь сейчас, завтра обещана.

xtras · Answer 2 · 2013-10-27T09-52-00.000Z

Вы можете установить свойство "margin" - CSS, всех этих кнопок относительно их соответствующих позиций.

спасибо, но полноэкранная высота установлена на «100%», а когда высота экрана становится ниже, пиксель поля или процент не меняют положение кнопки.

jrd1 · Answer 3 · 2013-10-27T08-41-00.000Z

Ваша проблема центрирования изображения как по горизонтали, так и по вертикали хорошо документирована в CSS-Tricks:

http://css-tricks.com/snippets/css/absolute-center-vertical-horizontal-an-image/

Один из примеров (который близок к тому, что вы хотите, и не имеет недостатка в том, чтобы знать размеры изображения при попытке использовать метод):

html { 
   width:100%; 
   height:100%; 
   background:url(http://i.stack.imgur.com/5qSmX.jpg) center center no-repeat;
}

Что выглядит так:

http://jsfiddle.net/ukVNS/

Обратитесь к ссылке, приведенной для других методов.