хочу добавить изображение в левый угол div - PullRequest
Новая
       5

хочу добавить изображение в левый угол div

5 голосов
/ 11 октября 2010

alt text

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" type="text/javascript"></script>

<style type="text/css">
.connection {
cursor:pointer;
display:block;
height:80px;
position:absolute;
width:50px;
}
.ui-widget-content {
color:#FFFFFF;
}


.ui-corner-all {
-moz-border-radius:6px 6px 6px 6px;
}
.ui-widget-content {
background:url("images/ui-bg_inset-soft_25_000000_1x100.png") repeat-x scroll 50% bottom #000000;
border:1px solid #666666;
color:#FFFFFF;
}
.ui-widget {
font-family:Segoe UI,Arial,sans-serif;
font-size:1.1em;
}
.con-text {
 font-size:0.7em;
  margin-top:-0.7em;
  padding:2px;


}
.conimage {
background:url("access-link-card.png") no-repeat scroll 0 0 transparent;
}
.con-icon {
margin:0 auto;
text-align:center;
z-index:100;
 background: url("access-link-card.png") no-repeat;
    padding-left: 34px;
}
</style>
</head>

</head>
<body>

<div class="connection ui-draggable" id="connection-581" style="left: 435px; top: 123px;">    
    <div class="con-icon" id="con_icon-581">   
        <div class="con-text ui-widget ui-widget-content ui-corner-all" id="con-text-581">        Rahul3      
        </div>    
    </div>   
</div>
</body>
</html>

я хочу, чтобы это изображение было в левом углу элемента div con-text или con-icon как значок, изображение идет не в полном размере, пожалуйста, помогите, как изображение будет в полном размере

С уважением рахул

Ответы [ 2 ]

4 голосов
/ 11 октября 2010

Установите его как фоновое изображение и добавьте к элементу отступ, чтобы текст отображался справа от изображения: 

.con-text {
  font-size:0.7em;
  margin-top:-0.7em;
  padding:2px;
  background: url(your_image_url) no-repeat;
  padding-left: something-greater-than-image-width px;
}
2 голосов
/ 11 октября 2010

Вы можете попробовать ответ Касабланки, другой вариант - установить фоновую позицию изображения: 

.con-text {
    background url('yourImage.jpg') no-repeat 5px 2px;
}

при позиционировании фоновых элементов два пиксельных значения горизонтальны, например (5 пикселей), а затем вертикальны (2 пикселя).

Настройте с помощью инструмента разработчика вашего браузера нужную позицию.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...