如何在 CSS 中不在背景中的图像上放置渐变？

Question

我正在尝试将渐变放在未从背景加载的图像上。 在我见过的所有示例中，他们从背景加载图像并进行渐变，但在我的情况下，我不想拥有背景图像，当我添加渐变时它什么也没做。 我向您展示 HTML 代码：

<section class="fourth_section">
                    <h1>Nuevos destinos que descubrir</h1>
                    <ul class="flex_list">
                        <li class="picture_list_first">
                            <figure>
                            <a href="#"><img src="/img/oporto.jpg" alt="imagen1"></a>
                            </figure>
                                <div>
                                    <h3>Oporto</h3>
                                </div>
                        </li>

这就是我尝试过的，但它不起作用：

.picture_list_first img {
    width: 330px;
    height: 332px;
    border-radius: 5px;
    margin: 0px -20px 0px -30px;
    background: rgb(0,0,0);
    background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(255,255,255,1) 100%);
}

谢谢你们。

Answer 1

您的代码的问题是您正在添加背景渐变，然后用图像覆盖它，这样您就再也看不到渐变了。

我不完全确定您的目标是什么，但是如果您想为图像添加半透明渐变，您可以通过在图像顶部添加另一个元素并使用背景属性设置样式来实现。

似乎这个问题已经在这里得到解答： 如何在 CSS 中的图像中添加渐变/过滤器

Answer 2

您可以简单地将背景添加到父元素（div/anchor/whatever），然后使图像半透明。 请参阅下面的代码段——悬停以查看差异

 .gradient-img { background: rgb(131,58,180); background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%); display: flex; } .gradient-img img { opacity: 0.5; width: 100%; transition: opacity 500ms 0ms ease-in-out; } .gradient-img img:hover { opacity: 1 }

 <div class="gradient-img"><img src="https://picsum.photos/200"></div>