如何在图片上放置div? [英] How to place a div over a image?

问题描述

我想在< img> 上放置< div> .

这是HTML:

  body {背景颜色:#cCa;}.图像 {职位:相对背景重复:不重复；}.内容 {背景颜色:lightGrey；位置:绝对；溢出:无；左:40px；顶部:40px；}  

 < link href ="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css"rel =" stylesheet"/>< link href ="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap-sensitive.min.css" rel ="stylesheet"/>< 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>  

有关图片的更多信息:

这是窗口视口较大时的外观.

这是窗口视口较小时的外观.

关于如何解决它的想法?任何帮助都会很棒！

解决方案

尝试将内容 div 的 z-index 属性设置为高于图片，如下所示:

  .content {z索引: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 {职位:相对} 

这将更改内容相对于图像 div 所在位置的位置.阅读 position 属性，以了解如何移动 .content .不过，您仍然需要媒体查询来更新 div 的大小/位置，以响应浏览器大小的变化.

I want to place a <div> over an <img>.

Here's the HTML:

body {
  background-color: #cCa;
}

.image {
  position: relative;
  background-repeat: no-repeat;
}

.content {
  background-color: lightGrey;
  position: absolute;
  overflow: none;
  left: 40px;
  top: 40px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap-responsive.min.css" rel="stylesheet"/>

<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>

More info with pics:

This is how it looks like when the window viewport is large.

This is how it looks like when the window viewport is small.

Ideas on how to fix it? Any help would be great!

解决方案

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?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！