2010-10-11 103 views
4

alt text要添加的div圖像左上角

<!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-文本或CON-圖標,徽章,左下角 圖片即將並非全尺寸,請幫助如何圖像會在全尺寸

問候 拉胡爾

回答

4

它設置爲背景圖片和填充添加元素,使文本顯示在圖像的右側:

.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; 
} 
+0

嗨我已更改代碼和編輯問題現在的問題是圖像未來全尺寸請幫助圖像將如何全尺寸 – XMen 2010-10-11 06:48:55

+0

設置div的寬度和高度大於圖像大小。 – casablanca 2010-10-11 13:33:03

2

你可以嘗試卡薩布蘭卡的答案,另一種選擇是設置圖像的背景位置:然後垂直

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

定位背景元素的時候,這兩個像素值水平如(5像素)(2像素)。

使用瀏覽器的開發人員工具調整所需的位置。