Как сделать встроенный линейный градиент в Nuxt / Vue

Я ищу способ применить линейный градиент поверх моего встроенного фонового изображения. Я попытался исправить стиль CSS, но класс помещается под изображением.

<div class="header__bkgd" v-bind:style="{'background-image': 'url(' + require('~/assets/images/dist_bkgd.jpg') + ')'}"></div>

vue.js nuxt.js css background-image linear-gradients
person Brennan Schloo    schedule 25.07.2018    source источник

Ответы (1)


arrow_upward
-1
arrow_downward

Градиенты можно добавить поверх изображения с помощью этого стиля фона css:

background: linear-gradient( rgba(0, 23, 32, 0.5) 100%, rgba(255, 32, 32, 0.5) 100%),
url('/static/bg.jpg') no-repeat center center fixed;

Надеюсь это поможет!

person Lowry    schedule 25.07.2018
comment
Как я могу импортировать эту функцию? Когда я вставляю такой код, я получаю белый фон, так как этой функции, похоже, не существует. - person Eugene; 21.07.2020
comment
Спасибо! В моем случае у меня было другое свойство `background-color:` - linear-gradient с ним не работает, вместо выбранных цветов появляется белая область. - person Eugene; 22.07.2020