粘性菜单的设计问题，在滚动时设置背景
我正在开发一个包含粘性菜单的基本模板。
我发现左侧的徽标和右侧的图标很粘，但即便如此，菜单的背景仍然缺失，因此它与人体网站的内容没有区别。
他现在的样子
这将是在使用该菜单滚动时出现的问题：
如果您可以欣赏，菜单中没有背景。这是一个问题，因为它的html结构不同。
我只是上传文件，因为这里有很多要显示的文件：https://mega.nz/#!Fp5kTQhR!Bmvts-ghpsfQLnt7zvhuE6bAXeA78IAQP677_5xrayE
但这仍然是一段菜单代码：
if (event is Login) {
yield currentState.copyWith(formProcessing: true);
store.dispatch(authActions.login(
currentState.username,
currentState.password,
(error, data) {
print(error);
print(data);
dispatch(OtherEvent());
},
));
} else if (event is OtherEvent) {
// You can yield here what you want
yield currentState.copyWith(formProcessing: false);
}
header {
width: 100%;
height: 15vh;
z-index:3;
}
.logo1 {
max-height: 100%;
max-width: 50%;
height: auto;
}
@media only screen and (min-width: 769px){
nav .menus {
position: fixed;
width: 87%;
line-height: 100px;
z-index:3;
}
nav .menus_der {
position: absolute;
right: 80px;
width: 200px;
height: 85px;
}
.fondo_menu {
background-color:lightblue;
}
.logo_1 {
line-height: 60px;
position: fixed;
/* float: left;*/
margin: -26px 46px;
color: #fff;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;z-index:3;
}
}
@media only screen and (max-width: 767px){
nav .menus {
position: fixed;
width: 100%;
z-index:3;
}
}
@media only screen and (min-width: 768px){
nav .menus {
position: fixed!important;
width: 100%!important;
z-index:3!important;
}
}
nav ul menus {
line-height: 60px!important;
list-style: none!important;
background: rgba(0, 0, 0, 0)!important;
overflow: hidden!important;
color: #fff!important;
padding: 0!important;
text-align: right!important;
margin: 0!important;
padding-right: 40px!important;
transition: 1s!important;z-index:3!important;
}
nav.blacks ul {
background: #161616;
}
nav ul li menus {
padding: 16px 40px;
position: right;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-size: 16px;
}
.menu{
background:#161616;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #161616;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
.box {
transition: box-shadow .3s;
width: auto;
height: calc(auto+500px);
margin: calc(auto+500px);
border-radius:10px;
border: 1px solid #ccc;
background-color:rgba(0, 0, 0, 0.2);
opacity: 1;
}
.box1 {
transition: box-shadow .3s;
width: auto;
height: calc(auto+500px);
margin: calc(auto+500px);
border-radius:10px;
padding-bottom: 10%;
border: 1px solid #ccc;
background-color:rgba(0, 0, 0, 0.2);
opacity: 1;
}
.box:hover {
box-shadow: 0 0 10px rgba(33,33,33,.9);
}
.box1:hover {
box-shadow: 0 0 10px rgba(33,33,33,.9);
}
@import url(http://fonts.googleapis.com/css?family=Raleway:500,600,700,100,800,900,400,200,300);
@import url(http://fonts.googleapis.com/css?family=Playball);
[v-cloak] {
display: none;
}
.botoneraEmpresa {
margin: 20px;
}
.botonEmpresa {
top: 50%;
padding: 7%;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border: 1px solid #000000;
/* background-color: rgb(231,166,26); */
min-height: 100px;
cursor: pointer;
-webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
}
body, html{
font-family: 'Raleway', sans-serif;
text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;
}
@media (min-width: 1200px){
.container {
width: 1100px;
}
}
h1{
text-transform: uppercase;
}
h2{
line-height: 20px;
margin: 0;
}
h4 {
margin-bottom: 20px;
font-size: 16px;
font-weight: 700;
color: rgb(47, 147, 123);
}
p{
font-size: 13px;
}
a {
color: #ffffff;
transition: all 0.8;
}
a:hover,
a:focus{
color: white;
font-weight:bold;
text-decoration: none;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* Home Style */
#tf-home{
background: url(../img/back-login.jpg);
background-size: cover;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
color: #cfcfcf;
}
#tf-home .overlay{
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,13) 17%, rgba(255,255,255,0.66) 35%, rgba(255,255,255,0.55) 62%, rgba(255,255,255,0.2) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(17%,rgba(255,255,255,1)), color-stop(35%,rgba(255,255,255,0.66)), color-stop(62%,rgba(255,255,255,0.55)), color-stop(100%,rgba(255,255,255,0.2))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 17%,rgba(255,255,255,0.66) 35%,rgba(255,255,255,0.55) 62%,rgba(255,255,255,0.2) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 17%,rgba(255,255,255,0.66) 35%,rgba(255,255,255,0.55) 62%,rgba(255,255,255,0.2) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 17%,rgba(255,255,255,0.66) 35%,rgba(255,255,255,0.55) 62%,rgba(255,255,255,0.2) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 27%,rgba(255,255,255,0.66) 35%,rgba(255,255,255,0.55) 62%,rgba(255,255,255,0.2) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc000000', endColorstr='#66000000',GradientType=0 ); /* IE6-9 */
height: auto;
background-attachment: fixed;
}
.content{
padding: 15% 0 5% 0;
text-align: center;
}
/* Navigation */
#tf-menu {
margin-bottom: 0;
background: transparent;
border: 0;
color: #fff !important;
padding: 2% 0;
transition: all 0.5s;
}
#sticky {
padding: 0.5ex;
background-color: #333;
color: #fff;
font-size: 2em;
border-radius: 0.5ex;
}
#tf-menu.stick {
position: fixed;
top: 0;
width: 100%;
z-index: 10000;
background: #222222;
padding: 1% 0;
}
#tf-menu.navbar-default .navbar-nav > li > a {
color: gray;
text-transform: uppercase;
font-size: 12px;
font-weight: 700;
letter-spacing: 1px;
}
#tf-menu.navbar-default .navbar-nav > li > a:hover,
#tf-menu.navbar-default .navbar-nav > li > a:focus {
color: #2F937B;
background-color: transparent;
}
.logo {
font-family: 'Playball', cursive;
}
#tf-service{
padding: 7% 0;
}
.media-left.media-middle i {
padding: 20px 30px 20px 0;
font-size: 30px;
color: rgb(47, 147, 123);
}
.media-body h4 {
margin-bottom: 20px;
font-size: 16px;
font-weight: 700;
color: rgb(47, 147, 123);
}
#tf-portfolio{
background: #f1f1f1;
padding: 5% 0 8% 0;
text-align: center;
}
.section-title hr{
border-color: rgb(47, 147, 123);
width: 60px;
}
.section-title h2{ font-weight: 700;}
button.btn,
a.btn {
transition: all 0.5s;
}
button.btn.btn-primary.my-btn,
a.btn.btn-primary.my-btn {
background: #2F937B;
border-color: transparent;
border-radius: 0px;
border-width: 2px;
padding: 10px 30px;
text-transform: uppercase;
font-size: 12px;
letter-spacing: 1px;
font-weight: 600;
}
button.btn.btn-primary.my-btn:hover,
a.btn.btn-primary.my-btn:hover{
background: #FFFFFF;
color: #2F937B;
border-color: transparent;
}
button.btn.btn-primary.my-btn.dark:hover,
a.btn.btn-primary.my-btn.dark:hover{
background: #222222;
color: #ffffff;
border-color: transparent;
}
a.btn.btn-primary.my-btn2 {
background: rgba(47, 147, 123, 0);
border-color: #FFFFFF;
border-radius: 0px;
border-width: 2px;
padding: 10px 30px;
text-transform: uppercase;
font-size: 12px;
letter-spacing: 1px;
font-weight: 600;
color: #FFFFFF;
}
a.btn.btn-primary.my-btn2:hover{
background: #2F937B;
color: #ffffff;
border-color: transparent;
}
ul.cat.list-inline li a {
border: 1px solid #2F937B;
padding: 5px 15px;
font-size: 11px;
text-transform: uppercase;
font-weight: 600;
letter-spacing: 1px;
color: #2F937B;
transition: all 0.5s;
}
ul.cat.list-inline li a:hover{
background: #2F937B;
color: #ffffff;
}
.space{ padding: 20px}
.toppadding{ padding-top: 30px}
.nopadding{ padding: 0;}
#tf-about{
background: url(../img/back-registro.jpg);
background-size: cover;
background-position: center;
background-attachment: scroll;
background-repeat: no-repeat;
color: #222222;
}
#tf-about .overlay{
height: auto;
background-attachment: fixed;
padding: 10% 0;
}
#tf-why-me{
background: url(../img/i3.jpg);
background-size: cover;
background-position: center;
background-attachment: scroll;
background-repeat: no-repeat;
color: #222222;
}
#tf-why-me .overlay{
height: auto;
background-attachment: fixed;
padding: 5% 0;
}
ul.why-me li{
margin: 10px 0;
}
#tf-contact{
background: url(../img/i1.jpg);
background-size: cover;
background-position: center;
background-attachment: scroll;
background-repeat: no-repeat;
padding: 5% 0;
text-align: center;
}
form#contact {
padding: 5%;
background: #f1f1f1;
outline: 6px solid rgba(34, 34, 34, 0.08);
}
#tf-contact input.form-control {
height: 40px;
}
#tf-contact .form-control{
display: block;
width: 100%;
margin-bottom: 20px;
padding: 16px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #FFF;
background-image: none;
border: 1px solid #FFF;
border-radius: 0;
border-top: 2px solid transparent;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: none;
-o-transition: none;
transition: all 0.8s;
}
#tf-contact .form-control:focus,
#tf-contact .form-control:hover{
border-top: 2px solid #2F937B;
}
nav#tf-footer {
background: #222222;
background-image: url(../img/franja.jpg);
padding: 10px 0;
color: #f1f1f1;
text-shadow: 1px 1px 2px #000000;
}
nav#tf-footer a:hover {
color: #CCC;
}
.modal-footer {text-align: center !important;}
.modal-header, .modal-footer{background-color:transparent !important;background-image:url('../img/franja-50.jpg') !important;background-position:center center;}
/* .navbar-collapse {background-color:transparent !important;background-image:url('../img/white-50.png') !important;} */
.navbar-collapse {
/* background-color: #333; */
/* background-image: url(../img/white-50.png) !important; */
}
.btn-ejec{color:#fff !important;background: #EC971F !important;border-color:#F2B662 !important;}
.btn-ejec:focus,.btn-ejec:hover{color:#fff !important;background: #F2B662 !important;border-color:#EC971F !important;}
.btn-ejecucion{color:#fff !important;background: #EC971F !important;border-color:#F2B662 !important;}
.btn-ejecucion:focus,.btn-influencia:hover{color:#fff !important;background:#F2B662 !important;border-color:#EC971F !important;}
.btn-influencia{color:#fff !important;background: #F57030 !important;border-color:#F89B6E !important;}
.btn-influencia:focus,.btn-influencia:hover{color:#fff !important;background:#F89B6E !important;border-color:#F57030 !important;}
.btn-relacion{color:#fff !important;background: #B973FF !important;border-color:#CE9DFF !important;}
.btn-relacion:focus,.btn-relacion:hover{color:#fff !important;background:#CE9DFF !important;border-color:#B973FF !important;}
.btn-pensamiento{color:#fff !important;background: #00A67C !important;border-color:#4CC1A3 !important;}
.btn-pensamiento:focus,.btn-pensamiento:hover{color:#fff !important;background:#4CC1A3 !important;border-color:#00A67C !important;}
.etiquetas .btn{width:220px !important;cursor:default;}
.texto-collapsado{height:auto !important;white-space: pre-wrap !important;}
.card-body{width:210px !important;height:120px !important;white-space: pre-wrap !important;}
@media only screen and (max-width: 767px){
.btn-circle{color:white !important;}
.btn-circle:hover{color: #2F937B !important;}
}
@media only screen and (min-width: 768px){
.btn-circle {width: 30px;height: 30px;border-radius: 15px;color:white !important;padding:8px !important;margin:8px 2px !important;line-height: 1px !important;text-align:center !important;}
.btn-circle:hover{color: #2F937B !important;}
}
#fortalezasGallup{font-size:0.8em !important;}
实际上，我们非常感谢您的帮助，我试图在CSS中添加一个简单的背景，但是显然div存在问题。我花了整个下午努力解决这个问题，我敢肯定这很简单，但现在看不到。
2 个答案:
答案 0 :(得分：0)
可以包含用于制作标题的CSS样式吗？看起来这可能只是语法错误，并且希望可以轻松修复。被置为粘滞的元素的行为就像绝对放置一样，因此它们浮在其他元素上方。为了使外观更好，导航栏具有纯背景色。尝试将background-color添加到<header>
答案 1 :(得分：0)
只需在标题的CSS中进行一些更改，我就添加了position:fixed并将margin-top赋予了您的.content。
header {
width: 100%;
height: 15vh;
z-index: 3;
position: fixed;
background: #ccc;
}
.content {
padding: 15% 0 5% 0;
text-align: center;
margin-top: 15vh;
}
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？