Question

我使用的是laravel，因此无法将背景图片放入CSS样式表中，或者失去了变量。所以这就是我现在的样子

<div class="gradient"><div class="topback" style="background-image: url('/storage/cover_images/{{$post->cover_image}}') ; background-size: cover; background-repeat:no-repeat; background-position: center center; ">

我正在尝试在渐变类的背景图像上进行渐变叠加。问题是无论我做什么，渐变类都不会显示在图像顶部。我什至用zindex尝试。

任何人都知道一个解决方案，我不必将背景图像放在CSS中？谢谢！

Answer 1

您可以简单地在所需元素上使用多个背景：

.topback {
  width:200px;
  height:200px;
}

<div class="topback" style="background-image:linear-gradient(to right,rgba(0,0,0,0.5),yellow), url('https://picsum.photos/500/500?image=1069') ; background-size: cover; background-repeat:no-repeat; background-position: center center; ">

如果您想要一种颜色：

.topback {
  width:200px;
  height:200px;
}

<div class="topback" style="background-image:linear-gradient(rgba(0,200,0,0.5),rgba(0,200,0,0.5)), url('https://picsum.photos/500/500?image=1069') ; background-size: cover; background-repeat:no-repeat; background-position: center center; ">

如何在嵌入式样式背景图片上显示CSS背景颜色

1 个答案: