css - 如何在 Nuxt/Vue 中做内联线性渐变

标签 css vue.js background-image linear-gradients nuxt.js

我正在寻找一种在我的内联背景图像之上应用线性渐变的方法。我试图调整 CSS 样式,但类被放置在图像下方。

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

最佳答案

可以使用此 css background 样式在图像顶部添加渐变:

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;

希望这对您有所帮助!

关于css - 如何在 Nuxt/Vue 中做内联线性渐变,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51525170/

相关文章:

jquery - MS Edge Iframe CSS

javascript - Angular:使用 NgIf 删除组件、内部表单和元素?

javascript - 更新单元测试的 vue 组件实例中的 Prop

javascript - 保存到驱动器按钮光标

php - 我的 php 测验应用程序在插入问题时无法正常工作

javascript - Vue.js 提交文本按钮

javascript - Vuetify 组合框不返回 id 而不是值

c# - 在图片框上绘制位图背景时出现内存不足错误

css - Firefox 不抗锯齿缩放背景 svg

css - 在多个背景中隐藏其中一张背景图片