2013-08-28 4 views
0

У меня есть фоновое изображение, работающее на моем обычном веб-сайте HTML. Я добавил 2 LOGOS другого веб-сайта в фоновом режиме. Как создать прозрачный DIV и LINK. Часть только с логотипом на моем сайте. Больше как горячая точка, когда я нажимаю логотип, который он должен открыть на новой вкладке и отображать веб-страницу ??? AnyHelp будет оценен! :)Ссылка на прозрачный DIV

Это CSS для Box,

#logobox1 { 
    width: 114px; 
    height: 28px; 
    Left: 1850; 
    top: 43;  
} 
#logobox2 { 
    width: 92px; 
    height: 40px; 
    left: 1857; 
    top: 40; 
} 
+0

Пожалуйста показать HTML, а также. Также было бы здорово создать JSFiddle. – MitulP91

+0

ALright! Дайте мне минуту –

+0

@ MitulP91 Проверьте это Черные пятна, где я хочу логотип .... http://jsfiddle.net/ –

ответ

1

Я думаю, что вы хотите якорь тег <a>, а не дела.

Мы используем абсолютное позиционирование, position: absolute;, на якорной бирке. Для того, чтобы это работало, он содержит элемент, который должен использовать относительное позиционирование, position: relative;. Затем мы устанавливаем отображение анкерных меток на блок, display: block;, поэтому он будет принимать размеры, которые мы даем. Конечно, это будет размер вашего изображения.

Кроме этого, это вопрос перемещения его сверху и слева от содержащего элемента, пока он не окажется в правильном положении.

http://jsfiddle.net/UHTPx/1/

HTML

<div class="container"> 
    <a class="hitbox" href="google.com" target="_blank"></a> 
</div> 

я добавил границы для каждого элемента для иллюстративных целей.

CSS

.container { 
    background: url('http://lorempixel.com/150/75/abstract/') no-repeat center center; 
    border: 1px dashed #DEDEDE; 
    height: 400px; 
    margin: 0 auto; 
    position: relative; 
    width: 400px; 
} 
.hitbox { 
    border: 1px dotted red; 
    height: 75px; 
    left: 50%; 
    margin-left: -75px; 
    margin-top: -37.5px; 
    position: absolute; 
    top: 50%; 
    width: 150px; 
}