将渐变添加到 Vuetify v-card :img
Add gradient to Vuetify v-card :img
<v-card
:img="require('@/core/assets/homeBg.png')"
>
</v-card>
图像正常显示，但我只想知道是否可以对该图像应用渐变。
（其实我只是想把图片调暗，这样前面的文字会更易读）
您可以使用线性渐变和图像添加自己的样式：
<v-card
style="background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(require('@/core/assets/homeBg.png')) center center / cover no-repeat"
>
</v-card>
注意：在 url() 里面你应该有 path/url 图片。通过改变 rgbA 颜色的不透明度来控制暗度。图像位置 (center center)、图像大小 (cover) 和重复 (no-repeat) 的复制与 img prop from v-card 生成的相同。
<v-card
:img="require('@/core/assets/homeBg.png')"
>
</v-card>
图像正常显示，但我只想知道是否可以对该图像应用渐变。
（其实我只是想把图片调暗，这样前面的文字会更易读）
您可以使用线性渐变和图像添加自己的样式：
<v-card
style="background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(require('@/core/assets/homeBg.png')) center center / cover no-repeat"
>
</v-card>
注意：在 url() 里面你应该有 path/url 图片。通过改变 rgbA 颜色的不透明度来控制暗度。图像位置 (center center)、图像大小 (cover) 和重复 (no-repeat) 的复制与 img prop from v-card 生成的相同。