Html 想要在div的左角添加图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3903747/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
want to add image left corner of div
提问by XMen
<!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
我想要这个图像在 div 上下文或 con-icon 的左角作为徽章，图像不是全尺寸请帮助图像如何变成全尺寸
regards rahul
问候拉胡尔
采纳答案by casablanca
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;
}
回答by tiltos
you could try Casablanca's answer, another option is to set the background position of the image:
您可以尝试卡萨布兰卡的答案，另一种选择是设置图像的背景位置：
.con-text {
background url('yourImage.jpg') no-repeat 5px 2px;
}
when positioning background elements, the two pixel values are horizontal eg (5px) then vertical (2px).
定位背景元素时，两个像素值是水平的，例如 (5px) 然后垂直 (2px)。
Adjust with your browser's developer tool for the desired position.
使用浏览器的开发人员工具调整所需的位置。
