Блог

это первый раз, когда я публикую здесь. Я пытался сделать это в течение 2 дней, но мне было очень трудно. Я использую компонент Vuetify и v-вкладки, чтобы показать некоторые вещи, подобные этому:

пример

Как вы можете видеть, карта фона черная, и я хочу изменить ее на прозрачную, чтобы отображался html-код фона, представляющий собой линейный градиент между синим/фиолетовым/черным…

Я попытался добавить цвет фона: прозрачный к элементу v-вкладки, как я сделал выше в v-вкладке «Материал Clase/Материал Complementario», но я не знаю, почему он не применяется к элементу v-вкладки ниже

Это мой код:

 lt;templategt; lt;v-app style="background-color: rgba(30, 30, 30, 0.3);"gt;  lt;v-tabs fixed-tabs background-color="transparent" color="green" slider-color="purple"gt;  lt;v-tabgt;Material Claseslt;/v-tabgt;  lt;v-tab-item gt;  lt;div class="mb-5 p-3"gt;  lt;h3 class="mb-3"gt;Guias de claseslt;/h3gt;  lt;div class="row"gt;  lt;div  v-for="(item, i) in items"  :key="i"  class="col-sm-12 col-md-6 col-lg-4"  gt;  lt;v-card  class="mx-auto background-tr borde-claro"  max-width="1000"  elevation="15"  outlined  gt;  lt;v-list-item three-line gt;  lt;v-list-item-contentgt;  lt;div class="text-overline mb-4 tx-white"gt;  {{ item.title }}  lt;/divgt;  lt;v-list-item-title class="text-h5 mb-1 tx-white"gt;  Clase: {{ item.clase }}  lt;/v-list-item-titlegt;  lt;v-list-item-subtitle class="tx-white"gt;  Descripcion: {{ item.descripcion }}  lt;/v-list-item-subtitlegt;  lt;/v-list-item-contentgt;   lt;v-list-item-avatar  tile  size="50"  color="grey"  gt;lt;/v-list-item-avatargt;  lt;/v-list-itemgt;   lt;v-card-actionsgt;  lt;v-btn class="tx-white borde-claro centrar" outlined rounded text gt;  Descargar  lt;/v-btngt;  lt;/v-card-actionsgt;  lt;/v-cardgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/v-tab-itemgt; lt;/v-appgt; lt;/templategt;    

Как вы можете видеть, я передаю в-вкладки в цвет фона на прозрачный , и это работает, потому что он показывает почву от корневого (линейный градиент цветов), но если я даю фон-цвет прозрачный в в-разделе-пункт не работает, потому что я вижу на черном фоне , как на скриншоте я выложил…

Заранее спасибо!!

в vuetify вы не можете изменить цвет фона элемента v-вкладки, потому что его можно изменить в элементе элементы v-вкладки. Вот что я сделал:

 lt;v-tabs v-model="userProfileTabs" :show-arrows="false" color="#E30E4F" background-color="transparent" darkgt;  lt;v-tab to="#tabs-1"gt;lt;bgt;TAB 1lt;/bgt;lt;/v-tabgt;  lt;v-tab to="#tabs-2"gt;lt;bgt;TAB 2lt;/bgt;lt;/v-tabgt;  lt;/v-tabsgt;  lt;v-tabs-items v-model="userProfileTabs" id="custom-tab-items"gt;  lt;v-tab-item value="tabs-1"gt;  lt;/v-tab-itemgt;  lt;v-tab-item value="tabs-2"gt;  lt;/v-tab-itemgt;  lt;/v-tabs-itemsgt;  

Я присвоил элементу значение и идентификатор «пользовательские элементы вкладки». Затем я настраиваю цвет фона с помощью css:

 lt;stylegt; #custom-tab-items {  background-color: transparent !important; } lt;/stylegt;