我正在尝试向背景图像添加渐变，因此渐变是从顶部和底部开始的，就像这样-https://prnt.sc/qjqng6背景图片代码-
body {
background-image: url('images/city.jpg');
background-position: top;
background-size: cover;
height: 900px;
margin: 0px;
}
我尝试添加渐变，但仅成功从底部到顶部添加了渐变。如果有人可以帮助我提供代码并解释其工作原理，我将不胜感激。
也许尝试一下：
//Adapt the colors
.body {
background: linear-gradient(to top, #6C2D72, #A53A6F);
}
CSS：
.gradient-bg{
display: inline-block;
background: -moz-linear-gradient(bottom, rgba(0,0,0,0) 0%, rgba(249, 249, 249, 0.89) 100%);
background: -webkit-gradient(linear, left bottom, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(249, 249, 249, 0.89) 100%);
background: -o-linear-gradient(bottom, rgba(0,0,0,0) 0%,rgba(249, 249, 249, 0.89) 100%);
background: -ms-linear-gradient(bottom, rgba(0,0,0,0) 0%,rgba(249, 249, 249, 0.89) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(249, 249, 249, 0.89) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 );
}
span{
position: absolute;
top: 183px;
}
img{
position:relative;
z-index:-1;
display:block;
height:200px; width:auto;
}
HTML：
<div class="gradient-bg">
<img src="https://i.stack.imgur.com/bDGCn.png">
<span>Your Text Here</span>
</div>
尝试一下。
body {
background-image: linear-gradient(to top, rgba(241, 110, 110, 0.64), rgba(247, 102, 211, 0.35)),url(https://images.unsplash.com/photo-1578109520926-27e174c2b776?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=282&q=80);
background-size: cover;
background-repeat: no-repeat;
height: 900px;
}<body>
</body>