关于#html5#的问题:就是这个图片的人物背景怎么可以与周围的环境融合下面这张是我做的

img

就是这个图片的人物背景怎么可以与周围的环境融合
下面这张是我做的

img

我用的是盒子阴影效果 可是做的感觉还是很别扭 上面这种咋做呀

可以使用mask

img

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .img {
      width: 400px;
      height: 300px;
      border-radius: 50%;
      background: url('./287937476576116.jpg');
      -webkit-mask: radial-gradient(circle 160px, #fff, transparent);
    }
  </style>
</head>
<body>
  <div class="img"></div>
</body>
</html>

有没有可能上面那一整个带着人像和背景是一张图

css属性 mix-blend-mode 定义元素与父元素背景如何混合。

建议能采用底图形式,就采用,实在不行再考虑css(效果和可支持调整,有限)
你参考的网页也是采用一张底图实现,如下链接:

https://bkimg.cdn.bcebos.com/pic/8b82b9014a90f603738dee3c9c5ba41bb051f819473c?x-bce-process=image/resize,m_lfit,h_452,limit_1