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

Question

我想使图像的下半部分和线性渐变变暗，这样它就会从顶部的光变暗到底部的暗部。

如果还有其他选项可以使用div，那么文本在哪里？

你需要在html中用css或style做到这一点吗？

我的 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>

我的 style.css 包含以下条目：

#content-wide { 
 position: relative;
 width: 1180px;
 float: left;
 background: #F4F4F4;
 margin-bottom: 19px;
}

.imgwide {
width: 1160px;
height: 450px;
margin: 10px 10px 10px 10px;
}

#content-wide .post, #content .page {
 background-color: #F4F4F4;
}

#content-wide .p-heading {
 position: absolute;
 bottom: 0;
 left:0;
 width: 844px;
 height: 180px;
}

#content-wide .p-heading h1 {
 color: #F8F8F8;
 font-size: 26px;
 padding: 20px 20px 20px 30px;
}

#content-wide .p-heading h1 a {
 color: #F8F8F8;
 text-decoration: none;
 text-transform: none;
}

#content-wide .p-heading h1 a:hover {
 text-decoration: none;
color: #F8F8F8;
}

#content-wide .p-content {
 padding: 0px 20px 20px 30px;
 font-family: Frutiger, Lato;
 font-size: 15px;
 line-height: 16px;
 text-align: none;
 color: #EAEAEA;
}

Answer 1

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

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

这会使background-image的底部变暗。

如果您不想使图像变暗但顶部的div变暗，则使用：

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

你的div上的

（.p-heading）。