图像移动到正确的CSS

我很新的Web开发，我有这样的代码：图像移动到正确的CSS

<style type="text/css"> 
    span { 
     background:red; 
     background: transparent url(../images/skin/exception.png) 0.4em 100% no-repeat; 
    } 
</style> 
<span> 
    Contents. 
</span>

我得到的输出，但图像被放置在Contents文本。我试过：

background-position: 25px;

但是，这是使图像消失！但我一直在寻找的是：

Contents . . . . . . . . . . . . . my_image

（请注意，在上面.的空间）

如果我做了错误？

在此先感谢。

来源

2012-10-09 sriram

'背景位置：中心权利;' – Zeta

@Zeta：我已经编辑我的问题！ – sriram

''不包含块。添加'display：block'。 – Zeta

请记住，<span>是一个内联元素，它不是用于希望以块方式显示的项目的正确标记。为此，您应该使用<div>。话虽如此，您可以使用text-indent: 25px;将文字移至右侧。或者，您可以使用left: 25px;将新的<div>移动到右侧。请记住left会告诉它你想放置它离左边界有多远。然后，你可以放在其他<div>文：

<style type="text/css"> 
div { 
    display:inline-block; 
} 
div.image { 
    background:red; 
    background:transparent url(../images/skin/exception.png) 0.4em 100% no-repeat; 
    left:25px; 
} 
</style> 
<div class="box"> 
    Contents. 
    <div class="image"></div> 
</div>

来源

2012-10-09 07:45:35 L0j1k

在FF div.image“消失”，并在IE浏览器被置于内容... – Cirou

它看起来像（从他的原始代码），他想将背景图像合并到错误的显示（注意背景颜色的红色和透明度）。 – L0j1k

如果你不需要，你的形象是一个background-image你可以应用此：

CSS：

<style> 

div#box{ 
    width: 100%; 
} 

img#image { 
    float: right; 
} 

</style>

HTML：

<div id="box"> 
    <span id="content"> 
     Contents. 
    </span> 
    <img src="bkg.jpg" alt="Image not available"> 
</div>

来源

2012-10-09 08:09:13 Cirou

图像不需要放在div中 - 只需将id添加到'img'标签即可获得相同的效果。 – whostolemyhat

是的，我知道......我也可以使用span而不是'div'，所以我不需要'display：inline'属性。这只是一个例子，要知道它是否是海报的好解决方案 – Cirou

我也同意@L0j1k跨度是内联级别元素。为什么要将一些内容放在一个范围内，然后在该范围内应用背景图像。不管怎么说请检查的jsfiddle链接

DEMO

http://jsfiddle.net/saorabhkr/BvMyg/

来源

2012-10-09 08:38:42 Soarabh

内联： -

<span> 
//content 
<img src="images/skin/exception.png" style="float:right"> 
</span>

来源

2012-10-09 09:38:34 suiz

图像移动到正确的CSS

回答

相关问题