Html 如何使背景图像的下部变暗？

我只想变暗图像的较低部分，当然是线性渐变，以便它从顶部的灯光变暗到div底部的灯光

如果有其他选项可以使用div执行此操作，那么文本在哪里

你需要用css还是html里面的样式来做

我的html代码，其中背景图像为：

<div id="content-wide">
<div class="post">
<div class="imgwide" style="background-image: url(image.jpg); background-repeat: no-repeat; background-size: 100%; background-position: center;">

<div class="p-heading"><h1><a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1>

<div class="p-content">
here is the text
</div>

</div>

</div>
</div>
</div>

---

您可以使用CSS解决方案，检查，它的工作原理如下：

background:linear-gradient(to bottom, rgba(0,0,0,0) 20%, rgba(0,0,0,1)), url('your_url');

这将使

背景图像的底部变暗



如果不想使图像变暗，但要使其顶部的div变暗，请使用：

background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 70%); 

在你的div（
.p-heading
）上。
它起作用了，但我也想知道如何保留80%的图片，如果可能的话，用css div只做20%的线性渐变。@Techuser你可以在
rgba（）后面添加/编辑
%
如您所愿。我理解，但无论您怎么做，文本都不会变暗，如果不变暗，图片也不会变暗，因此如果有选项可以使用
执行此操作，那就太好了。这样整个div将只覆盖背景图像的较低部分。可能吗？p-heading宽844px，高180px。谢谢！伟大的
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 70%);