Навбар прозрачный в буэфи

Я создаю лендпейдж и сталкиваюсь с некоторыми трудностями стиля из-за отсутствия практики.

Я хочу изменить фон панели навигации, поэтому я хотел сделать фон прозрачным, чтобы отображалась нижняя часть страницы. Как я могу это сделать?

введите здесь описание изображения

<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;
}

Спасибо


vue.js buefy
person Leonardo da Rosa Silveira João    schedule 12.03.2020    source источник

Ответы (1)


arrow_upward
3
arrow_downward

API buefy navbar:

https://buefy.org/documentation/navbar/#api-view

Прохождение этого реквизита:

<b-navbar :fixed-top="true"  :transparent="true" >

Документы Vue - реквизиты компонентов (рекомендую прочитать):

прозрачный «жучок»:

Откройте проблему github: ОШИБКА: прозрачная панель навигации не работает.

ВАЖНО: 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

См. Этот код (я добавил класс для прокрутки): 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" Удалите любой наведенный или активный фон с элементов навигационной панели.

person Ezra Siton    schedule 12.03.2020
comment
Большое спасибо за внимание. Но у меня есть другой вопрос: я хочу раскрасить панель навигации при использовании прокрутки. Вы знаете проприедаде? - person Leonardo da Rosa Silveira João; 17.03.2020
comment
И убираю фон белый, когда ставлю мышку на itens. - person Leonardo da Rosa Silveira João; 17.03.2020
comment
Я редактирую ответ - ›+1, если это решает ваши проблемы (Или отметьте как решение). - person Ezra Siton; 17.03.2020
comment
Пожалуйста, отметьте +1 (или прокомментируйте +1) на github для этой идеи: github.com/jgthms/bulma / issues / 2871 - person Ezra Siton; 17.03.2020