时间戳

首页 > 解决方案 > 如何在内联样式背景图像上显示 CSS 背景颜色

html - 如何在内联样式背景图像上显示 CSS 背景颜色

问题描述

我正在使用 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中的解决方案吗？谢谢！

标签： htmlcss

解决方案

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

.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; ">

推荐阅读