在图像上覆盖文字

问题描述：

我只是进入web开发（主要是iOS，Java，c＃程序员）。我有一个简单的问题，它很烦人。在图像上覆盖文字

<div id="banner"> 
    <img src="Styles/Banner.jpg" alt="banner" /> 
    <div id="bannerText"> 
    User ID 
    </div> 
</div>

我有一面旗帜这是一个简单的图片（JPG格式），我想覆盖一些文字。问题是将文字放在横幅上。我真的不希望使用apsolute定位。我希望图像和文字都居中。问题是我使用apsolute定位时，我似乎可以在图像上叠加文本，如果窗口被调整，这将会受到影响。什么是最好/简单的方法来做到这一点。

就像要感谢你们所有人的帮助。 GC

为什么你不想使用'position：absolute'，巧合的是，这将是最好的工具这个工作？ – 2012-08-16 10:56:17

答

Live demo

嘿，现在我想你应该想这个

HTML

<div id="banner"> 
    <img src="http://rapidgator.net/images/pict-download.jpg" alt="banner" /> 
    <div id="bannerText"> 
    User ID 
    </div> 
</div>

的CSS

#banner{ 
position:relative; 
    background:green; 
    padding:10px; 
} 
img{ 
vertical-align:top; 
} 
#bannerText{ 
position:absolute; 
    top:20px; 
    left:10px; 
    background:red; 
}

Demo

答

您必须给父元素（#banner）一个position: relative;以使其子级的绝对位置（#bannerText）依赖于横幅位置而不是窗口边界。

答

如果你可以使用CSS像下面的例子中使用的图像作为背景，而不是<img>标签的

#bannerText 
    { 
    background: url("Styles/Banner.jpg") no-repeat center center; 
    width: 123px; 
    height: 123px; 
    text-align: center; 
    }

如果你不想使用Position: 如果你想使用<img>然后去“feeela的”答案

在图像上覆盖文字

相关推荐