如何将< div>在< img> （响应）？ [英] How to place a <div> over an <img> (responsive)?
问题描述
我想在< img> 上放置< div> 。最终结果是响应使用Bootstrap框架。
如何在下面的代码中使用bootstrap类？
< style>
body {
background-color：#cCa;
}
.image {
position：relative;
background-repeat：no-repeat;
}
.content {
background-color：lightGrey;
position：absolute;
overflow：none;
left：40px;
top：40px;
}
< / style>
< body>
< div class =container-fluid>
< div class =row-fluid>
< div class =span12>
< div class =image> < img src =css_js / img / image.jpg> < / div>
< div class =content img-circle> [content]< / div>
< / div>
< / div>
< / div>
< / body>
更多信息与图片：
浏览器大小
$
/ p>
尝试设置内容的 z-index 属性 div ，比如：
.content {
z-index：3;
}
这将使内容 div 将在图像上方。为了使它随着浏览器变小而变大，您将需要使用媒体查询。这些是您包含在您的头中的标签，将允许您根据屏幕的大小加载不同的CSS文件。基本上，你应该只有更大的字体设置为CSS文件加载时，屏幕越小。如果您不熟悉媒体查询，这是阅读这些查询的好地方： https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries 。
更新：
根据您的意见，您应该将代码更改为：
< div class =span12>
< div class =image>
< img src =css_js / img / image.jpg>
< div class =content img-circle> [content]< / div>
< / div>
< / div>
这使得 img .content 由 .image 包装。然后，在您的CSS文件中添加以下规则：
.content {
position ：相对;
}
这将更改内容相对于图片位置 div 。读取位置属性，了解如何移动 .content 。您仍然需要媒体查询来更新 div 的大小/位置，以响应浏览器大小的变化。
I want to place a <div> over an <img>. The end result is responsive using Bootstrap framework.
How to use the bootstrap classes in the code below?
<style>
body {
background-color: #cCa;
}
.image {
position: relative;
background-repeat: no-repeat;
}
.content {
background-color: lightGrey;
position: absolute;
overflow: none;
left: 40px;
top: 40px;
}
</style>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div class="image"> <img src="css_js/img/image.jpg"> </div>
<div class="content img-circle">[content]</div>
</div>
</div>
</div>
</body>
More info with pics:
when browser size is large
when browser size is small.
Try setting the z-index property of the content div higher than the image, like this:
.content{
z-index: 3;
}
This will make it so that the content div will be above the image. To make it get bigger as the browser gets smaller, you are going to need to use media queries. These are tags that you include in your head that will allow you to load different CSS files based on the size of the screen. Basically, you should just have larger font settings for the CSS files loaded when the screen is smaller. If you're unfamiliar with media queries, this is a good place to read up on them: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries. Good luck!
UPDATE:
Based on your comment, you should change your code to this:
<div class="span12">
<div class="image">
<img src="css_js/img/image.jpg">
<div class="content img-circle">[content]</div>
</div>
</div>
This makes it so that the img and .content are wrapped by the .image. Then, in your CSS file, add this rule:
.content{
position: relative;
}
This will change the position of content relative to where the image div is located. Read up on the position property to learn how to move the .content around. You will still need media queries to update the size/position of the div in response to the browser size changing though.
这篇关于如何将< div>在< img> （响应）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
