我使用nav
透明Bootstrap
,其图片的CSS值为margin-top: -100px
,因此会显示在导航栏下方。它在IE中正确呈现:
但由于某些原因,图片无法识别Chrome中的否定margin-top
:
我的HTML有点复杂,但需要这样(出于各种原因):
<div class="hero-image-row">
<div class="hero-image-outer text-center">
<div class="hero-image-inner text-center">
<%= image_tag 'Background 1.jpg', class: "hero-image",alt: "Delicious-looking hot dogs on a manly grill. Just like God intended." %>
</div> <!-- hero-image-inner -->
</div> <!-- hero-image-inner -->
</div> <!-- row -->
我的CSS如下:
/* NAVIGATION */
#custom-bootstrap-menu.navbar {
margin-bottom: 0px !important;
}
#custom-bootstrap-menu.navbar-default .navbar-brand {
color: black;
}
#custom-bootstrap-menu.navbar-default {
font-size: 18px;
font-family: $font-typewriter;
background-color: $transparent-white !important;
border: none;
border-radius: 0px;
}
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a {
color: black;
}
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:focus {
color: black;
background-color: $transparent-black !important;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle {
border-color: black;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover,
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus {
background-color: $transparent-black;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover .icon-bar,
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus .icon-bar {
background-color: $transparent-black;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle {
border-color: black !important;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle .icon-bar {
background: black !important;
}
/* HEROS */
.hero-image-row {
margin-top: -50px !important;
overflow-x: hidden !important;
width: 100% !important;
}
.hero-image-outer {
width: 300%;
height: 400px;
overflow-y: hidden !important;
}
.hero-image-inner {
width: 66%;
overflow-x: hidden !important;
}
.hero-image {
height: 400px;
margin-left: -50%;
z-index: 0 !important;
}
@media screen and (min-width: 700px) {
.hero-image-outer {
width: 100%;
}
.hero-image-inner {
width: 100%;
height: 400px;
}
.hero-image {
width: 100%;
height: auto;
margin-left: 0%;
}
}
.overlap-hero-image {
margin-top: -300px;
height: 300px;
}
.height-auto {
height: auto !important;
}
任何人都可以帮我诊断为什么Chrome会在这里演出吗?我在其他网站上使用过类似的代码,从未遇到过问题。我已经尝试过使用和不使用SCSS变量来实现透明度,所以我知道这不是问题。这确实是有利可图的。
添加了NAVBAR代码:
<div id="custom-bootstrap-menu" class="navbar navbar-default " role="navigation">
<div class="container-fluid">
<div class="navbar-header"><a class="navbar-brand" href="/">The Manly Art of BBQ</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
</div>
<div class="collapse navbar-collapse navbar-menubuilder">
<ul class="nav navbar-nav navbar-right">
<li><a href="/products">Man Rules</a></li>
<li><a href="/about-us">BBQ</a></li>
<li><a href="/contact">My Mancard</a></li>
</ul>
</div> <!-- collapse -->
</div> <!-- container-fluid -->
</div> <!-- custom-bootstrap-menu -->
答案 0 :(得分:1)
使用webkit。
在当前保证金代码之后添加以下代码。
-webkit-margin-before: -100px;
答案 1 :(得分:0)
我有一些代码,将以下代码复制到测试html页面并查看输出。 希望这项工作。
.navbar-default{
background:rgba(255,255,255, 0.4);
background-image:none;
border-color: transparent;
}
.navbar-default .navbar-nav>li>a{
color: #000;
}
&#13;
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<img src="http://feelgrafix.com/data/wallpaper-hd/Wallpaper-HD-16.jpg" class="img-responsive first-slide" alt="First slide">
&#13;
答案 2 :(得分:0)
我最终使用它来修复顶部导航栏,将其从流程中删除:
#custom-bootstrap-menu {
position: absolute;
width: 100%;
}
答案 3 :(得分:0)
您还需要将以下CSS添加到要将负边距应用于的元素:
from PyQt5.QtWidgets import QApplication
from views import UI_Window
from models import Camera
if __name__ == '__main__':
camera = Camera(0)
app = QApplication([])
start_window = UI_Window(camera)
start_window.show()
app.exit(app.exec_())
就这么简单!
对于您的具体示例:
vertical-align: top;