Сделайте изображение позади текста и держите его в центре, используя CSS

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

Я пытаюсь использовать CSS

img.center
{
    z-index:-1;
}

но это не работает. и когда я изменяю код на

img.center
{
    position:absolute;
    left:0px;
    top:0px;
    z-index:-1;
}

если сделать изображение позади, но тогда, как я использовалleft:0px а такжеtop:0px ... он помещает изображение в лосьон 0,0 ... но я хочу, чтобы изображение оставалось в центре.

держать изображение в центре у меня есть<div align="center"> тег.

есть ли в любом случае, я могу держать изображение в центре и сделать его позади тоже ???

Моя страница .html выглядит следующим образом: (я пытался создать фоновое изображение для моего тега div, но там не было изображения)

<html>
<head>
<title>Question of the Week</title>
<style type="text/css">
    body
    {
        background-image:url('images/background.jpg');
        background-repeat:repeat-x;
    }

    .container
    {
    background-image:url('images/center.jpg');
    background-repeat:no-repeat;
    }
    td.cntr {padding-top:50px;}
</style>
</head>
<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0">

    <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <table width="100%" border="0" cellpadding="0" cellspacing="0">
                <tr>
                    <td><div align="left"><img src="images/logo.jpg"></div></td>
                    <td></td>
                    <td><div align="right"><img src="images/right_logo.jpg"></div></td></tr>
            </table>
        </tr>
        <tr>
            <table width="100%" border="0" cellpadding="0" cellspacing="0">
                <tr>
                    <td class="cntr">
                        <div id="container">
                            <input name="box" type="textbox" />
                            <input name="box" type="textbox" />
                            <input name="submit" type="submit" />
                        </div>
                    </td>
                </tr>
            </table>
        </tr>
    </table>
</body>
</html>
 Ian Elliott07 июл. 2009 г., 20:26
Можете ли вы поделиться источником HTML? То, как настроен HTML, сильно повлияет на то, какой CSS нужен.

Ответы на вопрос(7)

а не используя -1. Например, установите для div, содержащего ваши входные данные и метки, значение z-index, равное 100, и дайте изображению, которое вы хотите разместить позади него, z-индекс, равный 50.

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

body {z-index:0}
img.center {z-index:-1; margin-left:auto; margin-right:auto}

Настройка слева & amp; правильные поля для авто должны центрировать ваше изображение.

 07 июл. 2009 г., 20:36
Вы не должны использовать отрицательный z-индекс, потому что не все браузеры правильно его поддерживают.
Решение Вопроса

поместите свое изображение в фоновую область вашего веб-сайта / контейнера и поместите все, что вы хотите, поверх этого. так сказать у вас есть

<div id="container">
   <input name="box" type="textbox" />
   <input name="box" type="textbox" />
   <input name="submit" type="submit" />
</div>

Это будет в вашем коде, и ваш CSS будет выглядеть так:

#container {
    background-image:url(yourimage.jpg);
    background-position:center;
    width:700px;
    height:400px;
}

Чтобы это работало, у вас должны быть высота и ширина, определенные для определенных значений (то есть без%). Я мог бы помочь вам более конкретно, если вам это нужно, но мне нужно больше информации.

m not sure how you need to type it in as your are styling inside your html file. But you can use the Img{ position: relative Top: 150px; Left: 40px; } This would move my image up 150px and towards the right 40px. This method makes it so you can move anything you want on your page any where on your page If this is confusing just look on YouTube about position: relative

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

В моем html5 файле мое изображение является первым и ниже, где у меня есть тег h1. ИДК, если этот эффект ведьмы будет отображаться поверх другого.

Надеюсь это поможет.

Background Image Using z-index property of CSS

Фоновое изображение, вероятно, проще. Вам нужна фиксированная ширина где-то.

.background-image {
    width: 400px;
    background: url(background.png) 50% 50%;
}
<form><div class="background-image"></div></form>

position:absolute или жеposition:relative, Тогдасвойство z-index буду работать. Например.

#sometext {
    position:absolute;
    z-index:1;

}
image.center {
    position:absolute;
    z-index:0;
}

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

Другой вариант / взломать - сделать изображение фоновым, либо на всей странице, либо внутри текстового поля.

.wrapper {background:transparent url(yourimage.jpg) no-repeat center center;}

<div class="wrapper">
 ...input boxes and labels and submit button here
</div>
 Zeeshan Rang07 июл. 2009 г., 21:01
я попробовал твой код .. но он не работал. я отредактировал свой вопрос с помощью своего кода .. не могли бы вы взглянуть на него ... еще раз
 07 июл. 2009 г., 21:13
У вас есть идентификатор = "контейнер" но используют .container, который предназначен для класса. Либо используйте class = 'container' apos; в HTML или #container в CSS. Вам также не хватает background-position: center в CSS. Вы можете поместить весь фоновый CSS в одну строку, как в моем примере выше.
 07 июл. 2009 г., 23:24
Жаль, что вы получили короткие изменения в этом):

Ваш ответ на вопрос