Html CSS：框+文本在图像上
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4154177/
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
CSS: Box+text over image
提问by Karem
Firstly, I would like to show you a image(made in paint).
首先，我想向您展示一个图像（用油漆制作）。
Okay "current" is what I have now. I want to place a box over the image to the right, with black background, and then have text inside this box.
好的，“当前”就是我现在所拥有的。我想在右侧的图像上放置一个带有黑色背景的框，然后在此框中输入文本。
I tried myself using z-index and so, but without any success. Here's what I tried:
我尝试使用 z-index 等，但没有任何成功。这是我尝试过的：
<div> <!-- start div for image -->
<img style="z-index: -1;" src="1.jpg" width="860" height="240"> <!-- the image -->
</div> <!-- end div -->
<div style="z-index: 1; width: 300px; background: #000; position: relative;">
<div style="margin: auto;">
text text text
</div>
</div>
but this didnt turn out any good. How can i do this?
但这没有任何好处。我怎样才能做到这一点？
采纳答案by Stephan Muller
Something like this?
像这样的东西？
HTML:
HTML：
<div id="wrap">
<img src="http://jsfiddle.net/img/logo.png" />
<div id="text">text</div>
</div>
CSS
CSS
#wrap {
position:relative; /* make this relative to have the inner div absolute without breaking out */
width: 200px; /* fix the width or else it'll be the entire page's width */
background: silver;
border: 1px solid grey
}
#text {
position: absolute;
width: 40px;
right: 0;
top: 0;
bottom: 0;
background: black;
color:white
}
回答by Kyle
Your code is messy and overcomplicated for such a simple issue, you can simplify it a lot by only using two elements. The simpler the better.
对于这样一个简单的问题，您的代码凌乱且过于复杂，您只需使用两个元素就可以将其简化很多。越简单越好。
Please specify if you need the <img>tag.
如果您需要<img>标签，请说明。
HTML:
HTML：
<div id="golf_course">
<div class="text_wrap_right">
text text text text
</div>
</div>
CSS:
CSS：
#golf_course
{
background-image: url(http://ww1.prweb.com/prfiles/2006/12/13/491548/ThaiGolfCourse.JPG);
background-position: 0 -200px;
width: 900px;
height: 259px;
border: 5px solid #000;
}
.text_wrap_right
{
width: 300px;
height: 100%;
float: right;
background: #000;
color: #fff;
border-left: 2px solid #000;
}
And an example for you here: http://jsfiddle.net/Kyle_Sevenoaks/WQT6G/
回答by Kyle
I prefer a simple and more semantic HTML5 solution
我更喜欢简单且更具语义的 HTML5 解决方案
HTML:
HTML：
<figure>
<img src="..." />
<figcaption>text text text ... </figcaption>
</figure>
CSS:
CSS：
figure {
position : relative;
z-index : 1;
width : 860px;
height : 240px;
}
figcaption {
position : absolute;
z-index : 1;
top : 0;
right : 0;
width : 200px;
height : 240px;
background : #000;
}
回答by Aman Yadav
For writing text over image you put image in background style and alt text like this-
要在图像上书写文本，您可以将图像置于背景样式和替代文本中，如下所示 -
<img scr="" alt="text"/>
<style>
.img{background-image:url('IMAGE_URL'); }
</style>
回答by gregor
z-indexonly works for positioned elements (position: (absolute|fixed|relative)). So you have to position your elements. For example
z-index仅适用于定位元素 ( position: (absolute|fixed|relative))。所以你必须定位你的元素。例如
<div style="position: relative;">
<div style="position: absolute; top: 0; left: 0; z-index: 0; height: 100px; width: 300px;">
<img src="http://w3schools.com/images/w3cert.gif" />
</div>
<div style="z-index: 1; width: 200px; background: #000; position: absolute; left: 100px; color: #fff;">
<div style="margin: auto;">text text text</div>
</div>
</div>
should work.
应该管用。
回答by Ravindra Sane
You need to put that text div inside the div that contains the image.. then set top and right to 0px and position absolute. take some hints from here: http://jsfiddle.net/U25XQ/1/
您需要将该文本 div 放在包含图像的 div 中。然后将 top 和 right 设置为 0px 和绝对位置。从这里得到一些提示：http: //jsfiddle.net/U25XQ/1/
回答by Cpt. eMco
回答by Chinmayee G
Use position:absoluteto overlap 2 divs. You have to play with leftand topproperties to adjust its position.
使用position:absolute重叠2周的div。您必须使用left和top属性来调整其位置。
<div style="position:absolute"> <!-- start div for image -->
<img style="z-index: -1;" src="1.jpg" width="860" height="240"> <!-- the image -->
</div> <!-- end div -->
<div style="position:absolute; z-index: 1; width: 300px; background: #000; position: relative; left:3%; top:85%">
<div style="margin: auto;">text text text</div>
</div>
