div 标签中的图片答案

【问题标题】：Image in a div tagdiv 标签中的图片
【发布时间】：2012-04-18 14:33:32
【问题描述】：

它们有什么区别。图片只出现在第一种情况下。为什么没有出现在第二种情况下？

<div id='" + this.panelId + "Icon-1" + "'  style='width:34px;align:center;' class='iconDiv'><img id="+"Img"+ this.panelId+"  src="+"Images/i24_grey-info.png"+" /></div>



<div id='" + this.panelId + "Icon-1" + "'  style='width:34px;align:center; background-image:Images/i24_grey-info.png' class='iconDiv'></div>

谢谢大家。这行得通！但是我得到了 4 张图片...我的意思是图片重复了 4 次 :( 为什么会这样？

this.iconDiv = "<div id='" + this.panelId + "Icon-1" + "'  style='width:34px;height:34px; align:center;background-image: url(Images/i24x24_info.png);' class='iconDiv'></div>";

【问题讨论】：

你对'和"的使用是否有系统或者完全随机？
我猜这是缺少或有额外的单引号或双引号的问题。
@Uriel_SVK OP 在用于创建 HTML 的编程语言中使用双引号，在 HTML 本身内部使用单引号。
@MrLister 那你怎么解释<img id="+"Img"+ this.panelId+" src="+"Images/i24_grey-info.png"+" />？
@Uriel_SVK 您从那里的第一个文字开始，在最后一个文字的中间结束。所以你提到的第一个引号是第一个文字的结束引号。

标签： css image html background-image

【解决方案1】：

您的 CSS 不正确。没有align 样式，使用text-align。在background-image 之后使用冒号，并在图片 URL 周围使用url()：

style='width:34px; text-align:center; background-image:url(Images/i24_grey-info.png)'

您可能还必须将div 的高度设置为图像的高度。

【讨论】：

@user930514：如果元素大于背景图片，默认会重复，你可以使用background-repeat: no-repeat;来阻止它重复。

【解决方案2】：

替换

background-image:Images/i24_grey-info.png;

通过

background:url('Images/i24_grey-info.png') no-repeat;

我以前也遇到过类似的情况。尽量使用简写代码。

【讨论】：

【解决方案3】：

在第一行中，您将 gray-info.png 传递给 img 标签，但在第二行中，您将其传递给 background-img

【讨论】：

【解决方案4】：

使用 background-image 时也为 div 设置高度：

<div id='" + this.panelId + "Icon-1" + "'  style='width:34px;height:34px;align:center; background-image='Images/i24_grey-info.png' class='iconDiv'></div>"

【讨论】：

【解决方案5】：

您的 css 语法错误。应该是：

style='width:34px; align:center; background-image: (Images/i24_grey-info.png)'

另一个问题与div高度有关，当没有内容时默认设置为0。您必须设置高度才能看到图像：

style='width:34px; height: 50px; align:center; background-image: (Images/i24_grey-info.png)'

【讨论】：