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>

图像包装CSS

1 个答案: