问题样式div上的图像（CSS） [英] Trouble styling divs on top of an image (css)

问题描述

我有一个rails应用程序，我一直在努力，而我用它做的一个功能方面是我要求用户导入一个图像（我使用回形针gem来做到这一点）。一旦他们完成并完成了其他所有工作，我就会将该图像导入并用作其页面的背景图像。问题是.....我遇到了严重的问题。

我的html（haml）看起来像这样

  #cafe_show 
 .image_holding_div 
 = image_tag @ cafe.image.url（：medium）
 .cafe_info 
这是一个快速测试
  

我的CSS就像这样

  #cafe_show {
 .image_holding_div {
 position：relative; 
} 
 img {
 height：100vh; 
宽度：100％; 
职位：亲属; 
 z-index：-1; 
} 
} 
 
 .cafe_info {
 position：relative; 
 float：center; 
 height：100px; 
 width：auto; 
背景颜色：＃808080; 
不透明度：.9; 
 text-align：center; 
颜色：白色; 
} 
  

我遇到的问题是 .cafe_info div位于图片下方，而不是图片顶部。有人会有一个想法，我可以为此做什么？

解决方案

这两个，img和cafe_info是您需要使用位置：固定，或<$>

c $ c> position：absolute （取决于你想要什么风格）将cafe_info div放在最上面。

阅读更多： 查看绝对位置

祝你好运！

注意：

您也可以这样做：

如果您将css与erb兼容

 ＃cafe_show.scss.erb 
 .image_holding_div {
 position：relative; 
 background-image：url（<％= @ cafe.image.url（：medium）％>）; 
} 
  

然后您不需要image_tag。

I have a rails app that i've been working on, and one of the functionality aspects I do with it is that I ask the user to import an image (i'm using the paperclip gem to do that). Once they do that and finish creating everything else, I'm taking that image that is imported and using it as a background image for their page. Problem is.....i'm having serious problems actually doing that.

My html (haml) looks like this

#cafe_show
  .image_holding_div
    = image_tag @cafe.image.url(:medium)
    .cafe_info
      This is a quick test

and my CSS is like so

#cafe_show {    
  .image_holding_div {
    position: relative;
  }    
  img {
    height: 100vh;
    width: 100%;
    position: relative;
    z-index: -1;
  }
}

.cafe_info {
  position: relative;
  float: center;
  height: 100px;
  width: auto;
  background-color: #808080;
  opacity:.9;
  text-align:center;
  color:white;
  }

Problem I'm having is, the .cafe_info div sits below the image, and not on top of the image. Would anyone have an idea what I can do for this?

解决方案

The two, img and cafe_info is position: relative.

You need to use position: fixed, or position: absolute (depending on what style you would like) to have the cafe_info div on top.

Read more here: look under position absolute

Good luck!

Note:

You could also do something like this:

if you made your css compatible with erb

#cafe_show.scss.erb      
.image_holding_div {
  position: relative;
  background-image: url(<%= @cafe.image.url(:medium) %>);
}  

And then you don't need the image_tag.

这篇关于问题样式div上的图像（CSS）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！