想添加图像左边的div [英] want to add image left corner of div
本文介绍了想添加图像左边的div的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Transitional // ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\"> ;
< html xmlns =http://www.w3.org/1999/xhtmldir =ltr>
< head>
< script src =http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.jstype =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-draggableid =connection-581style =left：435px; top：123px;>
< div class =con-iconid =con_icon-581>
< div class =con-text ui-widget ui-widget-content ui-corner-allid =con-text-581> Rahul3
< / div>
< / div>
< / div>
< / body>
< / html>
我想将此图片作为徽章的div连接或连接图标的左角，$
$ b class =h2_lin>解决方案
将其设置为背景图片，并向元素添加一个填充，以使文字显示在图片右侧：
.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;
}
<!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>
i want this image in the left corner of div con-text or con-icon as badge, image is coming not full size please help how the image will come in full size
regards rahul
解决方案
Set it as a background image and add a padding to the element so that the text appears to the right of the image:
.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;
}
这篇关于想添加图像左边的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
