css - 图像包装 CSS

Question

我有这个 CSS:

.profile-pic-wrapper{
    display: inline-block;
    width: 84px;
    height: 84px;
    background: linear-gradient(-179deg, #F4F4F4 0%, #C0C0C0 100%);
    border-radius: 140px;
    box-shadow: 0 5px 10px 0px rgba(0,0,0,0.22), 0 10px 13px 0px rgba(0,0,0,0.34), inset 0 18px 18px 0 rgba(255,255,255,0.35), inset 0 -18px 18px 0 rgba(0,0,0,0.10);
  }

我想构建一个图像包装器，一个 div 类，我可以在其中插入我的图像。

我必须向此类或图像样式中添加什么以适应它？

谢谢

Answer 1

您可以使渐变略微透明，然后在其下方添加图像:

.box{
    display: inline-block;
    width: 84px;
    height: 84px;
    background: 
      linear-gradient(-179deg, rgba(244, 244, 244, 0.5) 0%, rgba(192, 192, 192, 0.5) 100%),
      url(https://picsum.photos/200/300?image=1069) center/cover;
    border-radius: 140px;
    box-shadow: 
     0 5px 10px 0px rgba(0,0,0,0.22), 
     0 10px 13px 0px rgba(0,0,0,0.34), 
     inset 0 18px 18px 0 rgba(255,255,255,0.35), 
     inset 0 -18px 18px 0 rgba(0,0,0,0.10);
  }

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

并且您可以依靠 CSS 变量轻松调整图像:

.box{
    display: inline-block;
    width: 84px;
    height: 84px;
    background: 
      linear-gradient(-179deg, rgba(244, 244, 244, 0.5) 0%, rgba(192, 192, 192, 0.5) 100%),
      var(--img) center/cover;
    border-radius: 140px;
    box-shadow: 
     0 5px 10px 0px rgba(0,0,0,0.22), 
     0 10px 13px 0px rgba(0,0,0,0.34), 
     inset 0 18px 18px 0 rgba(255,255,255,0.35), 
     inset 0 -18px 18px 0 rgba(0,0,0,0.10);
  }

<div class="box" style="--img:url(https://picsum.photos/200/300?image=1069)"></div>