центрирование и масштабирование заданных изображений в CSS - возможно? - PullRequest
Новая
       1

центрирование и масштабирование заданных изображений в CSS - возможно?

0 голосов
/ 31 марта 2011

Привет всем - я пытаюсь расположить 2 изображения друг над другом. Возможно, было бы более разумно объединить эти 2 изображения вместе для «простоты использования», но сейчас у меня есть 2 изображения - текст (logo.png) и форма (form.png). Мне бы хотелось, чтобы они выглядели так, выровнялись едва друг над другом - и чтобы они были в центре экрана, надеясь, что они будут масштабироваться и центрироваться в соответствии с размером экрана.

Есть ли простой способ для этого, который я пропускаю? Вот мои изображения и CSS: (Извините, у меня нет живой демонстрации, так как мой образец находится на локальном сервере - но я могу загрузить оба, если это поможет).

Изображение несколько временное, но размеры остаются прежними enter image description here

 html{
    background: url(images/bg4.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
     background-size: cover;
    }

 #main{
     width: 875px;
     height: 350px;
     background: url(images/form.png) 0 0 no-repeat;
     position: relative;
     margin: 15% 0 0 25%;
     z-index: 1;
    }

 #main form {
     width: 1014px;
     height: 228px;
     background: url(images/logo.png) 0 0 no-repeat;
     position: absolute;
     margin: -210px 0 0 -175px;
     z-index: 2;
    }

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

Большое спасибо за любую помощь!

(Кроме того, в настоящее время нет разметки, у меня есть этот код в теге <style type="text/css"> в моем файле index.html)

Ответы [ 3 ]

1 голос
/ 31 марта 2011

Вот, пожалуйста.Я создал макет для вас.

Проверьте рабочий пример на http://jsfiddle.net/GeD32/

body{
    color:white;
}
.logo{
    background:black;
    width:100px;
    height:50px;
    clear:both;
}

.menu{
    position:relative;
    z-index:1;
    margin:40px auto 0px auto;
    background:gray;
    width:400px;
    height:50px;
    clear:both;
}

.form{
    position:relative;
    z-index:0;
    margin:-25px auto 0px auto;
    background:red;
     width:500px;
     height:250px;
     clear:both;
}
0 голосов
/ 31 марта 2011

Если вы хотите, чтобы они были в центре, вы можете использовать:

HTML { ширина: 100%; поле: 0px авто; }

# главный { ширина: 875 пикселей; высота: 350 пикселей; background: url (images / form.png) 0 0 без повтора; поле: 0px авто; z-индекс: 1; }

# главная форма { ширина: 1014 пикселей; высота: 228 пикселей; background: url (images / logo.png) 0 0 без повтора; поле: 0px авто; z-индекс: 2; }

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

0 голосов
/ 31 марта 2011

Я уверен, что вы уже знаете, но вы не можете рассчитывать на поддержку CSS3, если только вы не знаете, что все ваши посетители будут использовать недавний браузер, поэтому фоновый маршрут может быть не лучшим способом.

При этом, поскольку вы дали своим <form> элементам фиксированный размер и фиксированный верхний и левый поля, они, конечно, сместятся, когда область просмотра будет другого размера. К вашему сведению, поскольку вы установили их в абсолютном положении, вы можете использовать атрибуты left, right, top и bottom вместо поля, т. Е. top: -210px; и left:-175px;

Если вы хотите #main центрировать по горизонтали, используйте автоматическое значение для левого и правого значений: 

margin: 15% auto <<whatever_bottom_should_be>>

или

margin: 15% auto; -> верхнее и нижнее одинаковое значение, левое и правое одинаковое значение

Это скажет браузеру разделить доступное пространство поровну на обе стороны.

...