使用css类加载图像？

Question

我有一个创建按钮类型背景的类。如何在这样的文本之前加载图标图像？

HTML

<div style="padding-left: 5px; position: absolute; height: 3em;width: 100%;">               
    <div id="Body_inputUpload" class="uploadify"><object id="SWFUpload_0" type="application/x-shockwave-flash" data="Images/uploadify.swf?preventswfcaching=1396906987080" width="120" height="30" class="swfupload" style="position: absolute; z-index: 1;"><param name="wmode" value="transparent"></object>
  <div id="Body_inputUpload-button" class="uploadify-button fileUploaderBtn">
         <span class="uploadify-button-text">Upload</span>
  </div>
</div>
<div id="Body_inputUpload-queue" class="uploadify-queue"></div>

CSS

.uploadify {
position: relative;
margin-bottom: 1em;
}
.fileUploaderBtn {
border: .1em #868686 solid;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
font-size: 1em;
font-family: Segoe UI;
padding: 5px 10px 5px 5px;
text-decoration: none;
display: inline-block;
text-shadow: 0px 0px 0 rgba(0,0,0,0.3);
text-align: left;
color: #000000;
background-color: #f4f5f5;
background-image: linear-gradient(to bottom, #f4f5f5, #dfdddd);
    height: 25px;
line-height: 20px;
width: 81px;
}

想要加载此图片

JSFiddle

Answer 1

如果您有权访问DOM，则可以通过img标记插入图片，该标记位于包含文字＆＃34;上传＆＃34;的span之前。这是一个显示该选项的小提琴：http://jsfiddle.net/72M8h/

Answer 2

您可以在

之前添加该图片

添加此css：

.fileUploaderBtn:before {
    content: "";
    background: url("http://i.stack.imgur.com/ZPMV1.png") center no-repeat;
    display: inline-block;
    width: 20px;
    height: 20px;
    padding-right: 20px;
    vertical-align: middle; 
}

并改变宽度：81px;最小宽度：81px;在.fileUploadBtn类中。

这是JSFillde中的示例：http://jsfiddle.net/cLeJs/4/

Answer 3

您只需将img标记放在文本范围之前：

<img id="img" src="http://i.stack.imgur.com/ZPMV1.png" /> <span class="uploadify-button-text">Upload</span>

以下是更新的 fiddle

Answer 4

将以下样式添加到以下类中：

.uploadify-button-text{
padding-left: 30px;
background: url('http://i.stack.imgur.com/ZPMV1.png') left center no-repeat;
}

我个人认为最好使用背景图像，以便您可以添加悬停状态，并删除宽度.fileUploaderBtn在这种情况下，无需为按钮指定特定宽度。如果希望按钮具有特定宽度，请更改填充。

Answer 5

只需在文字＆＃39;上传＆＃39;前面添加:before图片。的 DEMO 你的HTML

<span class="uploadify-button-text">Upload</span>

您可以用来加载＆＃39;图像内。

.uploadify-button-text:before {
    content:url(http://i.stack.imgur.com/ZPMV1.png)' ';/* image + 1 white-space */
    vertical-align:-0.2em;/* tune this if needed */
}