Html 在 div 中使用 img 标签作为带有文本的 div 背景图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28404760/
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
Use img tag inside a div as the divs background image with text over
提问by Sarower Jahan
I have the following html:
我有以下 html：
<div class="article">
<img src="..." class="article-bg">
<h1 class="heading">Article Heading</h1>
<h2 class="author">Author Name</h2>
</div>
The article divs background image gets set dynamically, so setting the divs background in css is out, I have to use an image tag. I'm not too sure though how to use an img as the divs background, and at the same time have text over the img.
文章divs背景图片是动态设置的，所以在css中设置divs背景就不行了，不得不用image标签。我不太确定如何使用 img 作为 div 背景，同时在 img 上有文字。
Also the height of the article div should always be 180px, I only have the following simple CSS:
另外文章div的高度应该总是180px，我只有以下简单的CSS：
.article {
height: 180px;
padding: 10px;
background-color: blue;
}
Thanks in advance for any tips!
提前感谢您的任何提示！
采纳答案by Sajad Karuthedath
use
用
<div class="article" style="background: url(imageurl)">
</div>
回答by Sarower Jahan
You can do it by this way:
你可以这样做：
<div class="article">
<img src="http://www.bdembassyusa.org/uploads/images/beautiful-Bangladesh-23.jpg" class="article-bg">
<h1 class="heading">Article Heading</h1>
<h2 class="author">Author Name</h2>
</div>
Ad some more css below:
在下面添加更多 css：
.article{
height: 180px;
padding: 10px;
background-color: blue;
overflow:hidden;
}
.article img{
position:absolute;
z-index:0;
height:200px;
margin:-10px;
}
.article h1,.article h2{
position:relative;
z-index:1;
}
Test it on jsfiddle: http://jsfiddle.net/sarowerj/o9L72do0/
回答by Complexity
What you're looking for in z-index. Using Z-index allows you to position one element above of the other. But do keep in mind that z-index does only work with positioned elements such as absolute or relative positioning.
您在z-index 中寻找的内容。使用 Z-index 允许您将一个元素放置在另一个元素之上。但请记住，z-index 仅适用于定位元素，例如绝对或相对定位。
You do specify a z-index as follows in the CSS:
您确实在 CSS 中按如下方式指定 z-index：
.heading { position: absolute; top: 10px; left: 10px; z-index: 900; color: #fff; }
See this jsFiddlefor a demo on how to use it:
有关如何使用它的演示，请参阅此jsFiddle：
回答by Hitesh Ramola
You can use the CSS property object-fitfor this. However it is worth noting that this property has very little to no support on IE and Edge browser.
您可以为此使用 CSS 属性object-fit。但是值得注意的是，该属性在 IE 和 Edge 浏览器上几乎没有支持。
.conainer{
position: relative;
width: 500px;
height: 300px;
color: #ffffff;
overflow: hidden;
margin: auto;
}
.conainer img{
position: absolute;
top: 0;
left: 0;
transition: all 1s ease;
}
.conainer:hover img{
transform: scale(1.2);
}
.conainer .content{
position: relative;
z-index: 1;
}
.conainer .content h2{
color: white;
text-shadow: 3px 2px 10px #545454;
text-align: center;
}<div class="conainer">
<div><img src="https://placeimg.com/640/480/nature" alt=""></div>
<div class="content">
<h2>Here's an example</h2>
</div>
</div>回答by Gil Epshtain
You can use this code, to make <img>behave like a background image:
您可以使用此代码，使其<img>表现得像背景图像：
<img src="..." class="background-image" />
.background-image {
position: absolute;
z-index: -1;
min-width: 100%;
min-height: 100%;
left: 0;
top: 0;
pointer-events: none;
}
