我有一个我一直在开发的 Rails 应用程序,我用它做的一个功能方面是我要求用户导入图像(我正在使用回形针 gem 来执行此操作)。一旦他们这样做并完成了其他所有内容的创建,我将使用导入的图像并将其用作他们页面的背景图像。问题是.....我实际上在这样做时遇到了严重的问题。
我的 html (haml) 看起来像这样
#cafe_show
.image_holding_div
= image_tag @cafe.image.url(:medium)
.cafe_info
This is a quick test
我的 CSS 就是这样
#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;
}
我遇到的问题是,.cafe_info
div 位于图像下方,而不是图像上方。有人知道我能为此做些什么吗?
最佳答案
这两个,img和cafe_info是position: relative.
您需要使用 position: fixed
或 position: absolute
(取决于您想要的样式)将 cafe_info div 放在顶部。
在这里阅读更多:look under position absolute
祝你好运!
注意事项:
你也可以这样做:
如果你让你的 css 与 erb 兼容
#cafe_show.scss.erb
.image_holding_div {
position: relative;
background-image: url(<%= @cafe.image.url(:medium) %>);
}
然后您就不需要 image_tag。
关于html - 在图像顶部设置 div 样式时出现问题 (css),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44948923/