带有图像的透明径向渐变？ [复制]

Posted 2023-03-06

【中文标题】带有图像的透明径向渐变？ [复制]

【英文标题】：transparent radial gradient with image behind? [duplicate]

【发布时间】：2020-12-09 06:57:22

【问题描述】：

我看到一个带有简洁渐变和部分遮蔽图像的网站，我如何使用 CSS 实现这一点？我猜想使用带有径向的绝对叠加，但我不太擅长渐变...这是掩蔽吗可能是？还是纯 CSS？

效果： https://i.imgur.com/WiIP5wk.png

<div style="position:relative; width:100%; height:600px; background-image:url('/background-image.jpg');>
    <div style="width:100%; height:100%; position:absolute; top:0px; left:0px;></div>
</div>

【参考方案1】：

多个背景可以近似这个：

html 
  min-height:100%;
  background:
    radial-gradient(60% 110% at top right,transparent 80%,red ),
    url(https://picsum.photos/id/1016/800/800) center/cover;

也可以屏蔽：

.box 
  height:100vh;
  background:url(https://picsum.photos/id/1016/800/800) center/cover;
  -webkit-mask:radial-gradient(60% 110% at top right,white 80%,transparent);


body 
 margin:0;
 background:red;

<div class="box"></div>

【讨论】：

我认为这个问题是重复的***.com/questions/2504071/… 或***.com/questions/16589519/… 你的回答确认重复

@dgknca 然后投票关闭重复，您有权这样做;)

我只是有点惊讶。好的;)