透明的径向渐变，后面有图像?

本文介绍了透明的径向渐变，后面有图像?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我看到一个带有整齐的简单渐变和部分模糊图像的wesite，我怎么能用CSS做到这一点呢?我猜想是带有径向的绝对叠加层，但是渐变不是很好...这是遮罩吗?也许?还是纯CSS?

I saw a wesite with a neat simple gradient and a partially oscured image, how can I acheive this with CSS?I guess with an absolute overlay with a radial but I'm not very good with gradient... is this masking maybe? or pure 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>

推荐答案

多个背景可以对此进行近似:

Multiple background can approximate this:

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>

这篇关于透明的径向渐变，后面有图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！