как наложить изображение на div? - PullRequest
Новая
       1

как наложить изображение на div?

4 голосов
/ 01 августа 2010

Я хочу разместить маленькое круглое изображение входа в систему на границе div, чтобы половина изображения находилась за границей только для стиля? Я думаю, мне нужно установить z-index, но как ИЛИ лучше путь?

Ответы [ 3 ]

6 голосов
/ 01 августа 2010

Это именно то, что вам нужно сделать.

Дайте вам имя класса. Затем в таблицу стилей добавьте что-то вроде этого 

#classname  
{
position: absolute;
z-index: 10;
top: #distance from top of page#
left: #distance from left of page#
}

z-index должен быть числом больше вашего div, который будет иметь индекс 0, если вы его не изменили.

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

2 голосов
/ 01 августа 2010 
.overout {  
text-decoration:none;
position: relative;
z-index: 10;
top: 105px;
right: -25px;
}
1 голос
/ 01 августа 2010

Вы можете сделать это очень легко, используя div. Рассмотрим следующий код 

<html>
<head><title>Logo test</title></head>
<body>
<div style="position: relative; width: 400px; height: 100px; margin: 0px auto 0px auto; top: 50px; background-color: #f00;">
 <div style="position: relative; height: 100px; width: 100px; background-color: blue; left: 20px; top: -50px;">
 </div>
</div>
</body>
</html>

Все, что вам нужно сделать, это заменить второе свойство div "background-color" на свойство "background-image" и поместить его в существующий div. Удостоверьтесь, что вы делаете div точный размер вашего логотипа и устанавливаете background-repeat: no-repeat;

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

.logo
{
   background-image: url(yourlogo.png);
   background-repeat: no-repeat;
   width:  /* width of logo */
   height: /* height of logo */
   top:    /* distance from top */
   left:   /* distance from left */
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...