如何在图像上添加渐变叠加？答案

【问题标题】：How to add gradient overlay over image?如何在图像上添加渐变叠加？
【发布时间】：2021-09-20 06:38:04
【问题描述】：

 #artist-image-container{
      background-image:
      radial-gradient(rgba(245, 246, 252, 0.52), #181c44),url('./yo\ yo\ honey\ singh.jpg');
      width: 34%;
      min-width: 34%;
      min-height: 300px;
      background-size: cover;
      color: white;
      background-repeat: no-repeat;
      padding: 20px;
 }

我已经编写了这段代码，但我想添加径向渐变，如下图所示。

【问题讨论】：

你也需要设置位置。它可能与background: radial-gradient(circle at 50% 0% , rgba(245, 246, 252, 0.52), #181c44 80%); 类似，请参阅更多信息：developer.mozilla.org/en-US/docs/Web/CSS/gradient/…

标签： html css radial-gradients

【解决方案1】：

也许你是那个意思

#img{
    background-image:
    linear-gradient(to bottom, rgba(245, 246, 252, 0.1), rgba(0, 0, 153, 0.8)),
    url('https://images.unsplash.com/photo-1481349518771-20055b2a7b24?ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8cmFuZG9tfGVufDB8fDB8fA%3D%3D&ixlib=rb-1.2.1&w=1000&q=80');
    width: 200px;
    height: 200px;
    background-size: cover;
    color: white;
    padding: 20px;
}

&lt;div id="img"&gt;&lt;/div&gt;

【讨论】：