vue.js - 导航栏在buefy中透明
问题描述
我正在创建一个土地页面,由于缺乏实践,我面临着一些风格上的困难。
我想修改导航栏的背景,所以我想让背景透明,以便出现页面底部。我怎样才能做到这一点?
<template>
<div class="Shellhub-LP-1280">
<div class="textura Nuvem">
<b-navbar>
<template slot="brand">
<b-navbar-item tag="router-link" :to="{ path: '/' }" transparent="true">
<img
src="https://raw.githubusercontent.com/buefy/buefy/dev/static/img/buefy-logo.png"
alt="Lightweight UI components for Vue.js based on Bulma"
>
<!-- <img src="@/static/logo-inverted.png"> -->
</b-navbar-item>
</template>
...
</b-navbar>
</div>
</div>
</template>
<style>
.Shellhub-LP-1280 {
/* width: 100%; */
height: 2283px;
background-color: #333640;
}
.textura {
/* width: 100%; */
height: 771px;
}
.Nuvem {
width: 100%;
height: 755px;
object-fit: contain;
opacity: 0.9;
float: right;
background: url('../static/nuvem.png');
background-repeat: no-repeat;
background-position: right;
}
谢谢
解决方案
buefy 导航栏 API:
https://buefy.org/documentation/navbar/#api-view
传递这个道具:
<b-navbar :fixed-top="true" :transparent="true" >
Vue 文档——组件道具(推荐阅读):
透明的“错误”:
打开github问题: BUG: navbar is-transparent not working。
重要:transparent
影响navbar items
(不是导航栏包装器本身)。
从导航栏项目中删除任何悬停或活动背景
所以添加简单的 CSS 样式:
nav.navbar.is-fixed-top {
background: transparent;
}
身体顶部填充问题
我找不到去除身体顶部填充物的方法。我添加了这种风格:
body{
padding-top: 0px!important;
}
基本示例:
const app = new Vue()
app.$mount('#app')
img.responsive_img{
width: 100%;
height: auto;
}
body{
padding-top: 0px!important;
}
/* change navbar background color */
nav.navbar.is-fixed-top {
background: transparent;
}
<link href="https://unpkg.com/buefy/dist/buefy.min.css" rel="stylesheet"/>
<div id="app">
<b-navbar class="is-link" :fixed-top="true" :transparent="true">
<template slot="brand">
<b-navbar-item tag="router-link" :to="{ path: '/' }">
<img
src="https://raw.githubusercontent.com/buefy/buefy/dev/static/img/buefy-logo.png"
alt="Lightweight UI components for Vue.js based on Bulma"
>
</b-navbar-item>
</template>
<template slot="start">
<b-navbar-item href="#">
Home
</b-navbar-item>
<b-navbar-item href="#">
Documentation
</b-navbar-item>
<b-navbar-dropdown label="Info">
<b-navbar-item href="#">
About
</b-navbar-item>
<b-navbar-item href="#">
Contact
</b-navbar-item>
</b-navbar-dropdown>
</template>
<template slot="end">
<b-navbar-item tag="div">
<div class="buttons">
<a class="button is-primary">
<strong>Sign up</strong>
</a>
<a class="button is-light">
Log in
</a>
</div>
</b-navbar-item>
</template>
</b-navbar>
<header style="min-height: 200vh;">
<img class="responsive_img" src="https://picsum.photos/2000/600"/>
</header>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/buefy/dist/buefy.min.js"></script>
在滚动时更改导航栏背景颜色
only by custom code
看到这个codepen(我在滚动上添加了一个类): https ://codepen.io/ezra_siton/pen/jOPZgmR
更改滚动她的背景颜色:
nav.navbar.is-fixed-top.isActive{
transition: background-color 0.5s ease;
background: red; /* change color on scroll */
}
将导航栏链接颜色更改为白色(对于深色英雄) - 添加“is-link”修饰符: https ://bulma.io/documentation/components/navbar/#colors
<b-navbar class="is-link" :fixed-top="true" :transparent="true" >
删除悬停/活动
:transparent="true"
从导航栏项目中删除任何悬停或活动背景。
推荐阅读
- dart - 为什么 floor() 在飞镖中四舍五入?
- android - 如何将 Kotlin 协程与 onSuccessListner 一起使用?
- ios - 有时在 iOS Swift 上渲染粉色容器的图像资源
- laravel - 如何在 laravel 框架中编写以下 mapreduce mongodb 查询
- javascript - 正则表达式来选择特定的词
- visual-studio-2019 - 更改 Visual Studio 2019 的搜索引擎
- c++ - C ++,如果某些条目重复,则输出所有可能的排列(递归算法)
- windows - Powershell检查用户是否是本地用户并且具有本地Windows机器上的用户名和密码的管理员权限(非活动目录)
- java - SystemProperties 类方法的替代方法及其在 java 或 kotlin 中的用法是什么?
- reactjs - 列内的反应路由器链接不会“填充”整个列