Вопросы Теги

Заставьте изображение пойти позади текста и сохранить его в центре с помощью CSS

Давайте объединим безопасный от культуры ответ и дополнительный ответ метода: 

public static class DateTimeExtensions
{
    public static DateTime StartOfWeek(this DateTime dt, DayOfWeek startOfWeek)
    {
        System.Globalization.CultureInfo ci = System.Threading.Thread.CurrentThread.CurrentCulture;
        DayOfWeek fdow = ci.DateTimeFormat.FirstDayOfWeek;
        return DateTime.Today.AddDays(-(DateTime.Today.DayOfWeek- fdow));
    }
}
15
задан GalacticCowboy 7 July 2009 в 19:04
поделиться

5 ответов

Хорошо, поместите свое изображение на задний план вашего веб-сайта / контейнер и положите все, что хотите. скажем, у вас есть: 

<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;
}

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

15
ответ дан 1 December 2019 в 00:54
поделиться

Сделать фоновое изображение по центру. 

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

<div class="wrapper">
 ...input boxes and labels and submit button here
</div>
12
ответ дан 1 December 2019 в 00:54
поделиться

Попробуйте следующий код: 

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

Если установить для левого и правого полей значение «Авто», изображение должно быть центрировано.

2
ответ дан 1 December 2019 в 00:54
поделиться

Вы можете разместить и изображение, и текст с помощью позиция: абсолютная или позиция: относительная . Тогда свойство z-index будет работать. Например, 

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

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

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

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

11
ответ дан 1 December 2019 в 00:54
поделиться

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

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

1
ответ дан 1 December 2019 в 00:54
поделиться