html - 通过导航显示背景
问题描述
我正在尝试复制这个网站作为引导学习课程的一部分。(https://trickyicky84.000webhostapp.com/)。HTML 有 nav 后跟一个 section 元素(带有类介绍),并且有一个应用于 section 元素的背景图像。
您可以看到导航在 View Port <768 中具有深色背景,但变为透明 >768 并且应用了背景图像。介绍部分似乎在导航中显示出来。我无法弄清楚哪个代码使导航透明,更重要的是背景图像如何应用于部分,应用于导航元素。
我假设它是这样的:
@media(min-width:767px) {
.navbar {
padding: 20px 0;
border-bottom: none;
letter-spacing: 1px;
background: transparent;
-webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
-moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
transition: background .5s ease-in-out,padding .5s ease-in-out;
}
我在自己的版本中尝试了类似的代码(为导航栏制作背景:透明),但它似乎采用了 Bootstrap 的背景:0 0 样式,使其呈现出类似灰色的颜色。我还没有研究过 CSS 过渡,我不确定这是否是使用原始站点中的过渡来完成的。我的网站位于https://trickyicky83.000webhostapp.com/。
正在运行的版本的完整 CSS:
@import "vendors/bootstrap/bootstrap.less";
@import "vendors/font-awesome/font-awesome.less";
@primary: #26a5d3;
@dark: #333333;
@light: #f4f4f4;
html{
width:100%;
height:100%;
}
body{
width:100%;
height:100%;
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
color:@dark;
background-color:@light;
}
// Typography
h1, h2, h3, h4, h5, h6{
margin: 0 0 35px;
text-transform:uppercase;
font-family: "Montserrat","Helvetica Neue",Helvetica,Arial,sans-serif;
letter-spacing:1px;
}
p{
margin: 0 0 25px;
font-size:18px;
line-height:1.6em;
}
a{
color:@primary;
}
a:hover,a:focus{
text-decoration:none;
color: darken(@primary, 20%);
}
// Navigation
.navbar {
margin-bottom: 0;
border-bottom: 1px solid rgba(255,255,255,0.3);
text-transform: uppercase;
font-family: "Montserrat","Helvetica Neue",Helvetica,Arial,sans-serif;
background-color: @dark;
}
.navbar-brand {
font-weight: 700;
}
.navbar-brand:focus {
outline: none;
}
.navbar-custom a {
color: @light;
}
.navbar-custom .nav li a {
-webkit-transition: background .3s ease-in-out;
-moz-transition: background .3s ease-in-out;
transition: background .3s ease-in-out;
}
.navbar-custom .nav li a:hover,
.navbar-custom .nav li a:focus,
.navbar-custom .nav li.active {
outline: none;
background-color: rgba(255,255,255,0.2);
}
.navbar-toggle {
padding: 4px 6px;
font-size: 16px;
color: @light;
}
.navbar-toggle:focus,
.navbar-toggle:active {
outline: none;
}
@media(min-width:767px) {
.navbar {
padding: 20px 0;
border-bottom: none;
letter-spacing: 1px;
background: transparent;
-webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
-moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
transition: background .5s ease-in-out,padding .5s ease-in-out;
}
.top-nav-collapse {
padding: 0;
background-color: @dark;
}
.navbar-custom.top-nav-collapse {
border-bottom: 1px solid rgba(255,255,255,0.3);
}
}
// Landing Page
.intro{
display:table;
width:100%;
height:auto;
padding:100px 0;
text-align:center;
color:@light;
background: url(../img/intro-bg.jpg) no-repeat bottom center scroll;
background-color:@dark;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
.intro-body{
display:table-cell;
vertical-align:middle;
}
.brand-heading{
font-size:40px;
}
.intro-text{
font-size:18px;
}
@media(min-width:767px) {
.intro{
height:100%;
padding:0;
}
.brand-heading{
font-size:100px !important;
}
.intro-text{
font-size:25px;
}
}
这是我的版本不工作:
@import "vendor/bootstrap/bootstrap.less";
@import "vendor/font-awesome/font-awesome.less";
@primary: #26a5d3;
@dark: #333333;
@light: #f4f4f4;
body {
margin-top:50px;
background-color: @light;
color:@dark;
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
}
// typography
h1,h2,h3,h4,h5,h6 {
text-transform:uppercase;
margin:0 0 30px;
letter-spacing:1px;
}
p {
margin: 0 0 25px;
font-size:18px;
line-height:1.6em;
}
// Navigation
.navbar {
margin-bottom: 0;
border-bottom: 1px solid rgba(255,255,255,0.3);
text-transform: uppercase;
font-family: "Montserrat","Helvetica Neue",Helvetica,Arial,sans-serif;
background-color:@dark;
}
.navbar .navbar-brand {
font-weight:700;
color:@light;
}
.navbar .nav li a {
color:@light;
}
.navbar .nav li a:hover {
color:@light;
}
.navbar .nav li a {
-webkit-transition: background .3s ease-in-out;
-moz-transition: background .3s ease-in-out;
transition: background .3s ease-in-out;
}
.navbar .nav li a:hover,
.navbar .nav li a:focus,
.navbar .nav li.active {
outline: none;
background-color: rgba(255,255,255,0);
}
@media(min-width:768px) {
.navbar {
padding:20px 0 ;
letter-spacing:1px;
background: transparent;
-webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
-moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
transition: background .5s ease-in-out,padding .5s ease-in-out;
}
}
//intro
.intro {
display:table;
padding:100px 0;
width:100%;
color:@light;
background: url(../img/intro-bg.jpg) no-repeat bottom center;
background-color:@dark;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
.intro-body {
display:table-cell;
vertical-align:middle;
}
.intro h1 {
font-size:40px;
}
.intro p {
font-size:18px;
}
@media(min-width:767px) {
.intro h1 {
font-size:100px !important;
}
.intro p {
font-size:25px;
}
}
解决方案
尝试像这样更新您的 CSS 代码。而且,margin-top: 50px
从body
.navbar {
margin-bottom: 0;
border-bottom: 1px solid rgba(255,255,255,.3);
text-transform: uppercase;
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
background-color: #333;
position: fixed;
top: 0;
left: 0;
width: 100%;
}
推荐阅读
- c++ - 临时对象是否传递给被视为 const 的函数?
- javascript - 使用 GAS 将 google doc 转换为 pdf 忽略文本编辑
- ios - 错误:“预期返回 Int 的函数中缺少返回值”
- flutter - 我不明白如何从 dart 中的 API 获取数据
- python - Pandas 中添加的新列无法识别
- r - 我的饼图闪亮不工作或显示任何东西
- reactjs - 在创建动态生成的组件时反应 createRef 返回 current = null
- javascript - PHP / javascript — 将选择选项数据/属性传递给内联 onchange 函数
- kubernetes - redis名称解析暂时失败
- javascript - 使用 javascript 进行评分评估