在图像上放置线性渐变

Question

我该怎么做呢？

https://jsfiddle.net/4f2646gx/2/

我想要做的是在图像上放置线性渐变线。

现在的样子：

最终结果应如下所示：

<style>
  #img1 {
    position: absolute;
    clip-path: circle(85px at center);
    top: 54%;
    left: 72%;
    transform: translate(-50%, -50%);
  }

  #img2 {
    position: absolute;
    top: 54%;
    left: 72%;
    transform: translate(-50%, -50%);
  }

</style>

<div style="width: 260px; height: 194px; cursor: pointer;background-color: #000000 ;background-image: linear-gradient( to right,transparent 0, transparent  83px,#0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px,transparent 260px ); border: 3px solid #0059dd;">

  <div style="position:relative; width:180px; height:180px">
    <img id="img1" width="170" height="113" src="https://i.imgur.com/BO6KOvw.jpg">
    <img id="img2" width="180" height="180" src="https://i.imgur.com/4HJbzEq.png">
  </div>
</div>

Answer 1

我会将所有内容放在一个容器中，使用绝对定位对元素进行分层。此外，渐变元素的背景颜色样式必须是透明的，否则您的图像上有一个带有线条的黑框，您看不到它。在此示例中，您还会注意到边框已移至顶级容器。

#container {
    background-color: black;
    position:relative; 
    width:260px;
    height:194px;
    padding: 0;
    border: 3px solid #0059dd;
}

#img1,#img2 {
    user-select: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#img1 {
    clip-path: circle(85px at center);
}
  
#grad {
    position: absolute;
    top: 0;
    left: 0;
    width: 260px; 
    height: 194px; 
    cursor: pointer;
    background-color: transparent; 
    background-image: linear-gradient( to right,transparent 0, transparent  83px,#0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px,transparent 260px ); 
   
  }

<div id="container">
    <img id="img1" width="170" height="113" src="https://i.imgur.com/BO6KOvw.jpg">
    <img id="img2" width="180" height="180" src="https://i.imgur.com/4HJbzEq.png">
    <div id="grad"></div>
</div>

Answer 2

为避免添加任何不必要的标记，您可以在容器 div 中添加一个伪元素。 Forked JSBin.

<style>  
  #img1, #img2 {
    position: absolute;
    top: 54%;
    left: 72%;
    transform: translate(-50%, -50%);
  }

  #img1 {
    clip-path: circle(85px at center);
  }
  .circle-gradient {
    width: 260px;
    height: 194px;
    cursor: pointer;
    background-color: #000000;
    border: 3px solid #0059dd;
    position: relative;
  }

  .circle-gradient:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
    background-image: linear-gradient( to right,transparent 0, transparent  83px,#0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px,transparent 260px );
  }

</style>

<div class="circle-gradient">
  <div style="position:relative; width:180px; height:180px">
    <img id="img1" width="170" height="113" src="https://i.imgur.com/BO6KOvw.jpg">
    <img id="img2" width="180" height="180" src="https://i.imgur.com/4HJbzEq.png">
  </div>
</div>

Answer 3

由于 CSS FTW，您可以使用 background 属性来堆叠多个图像和渐变。

在这段代码 sn-p 中，background-size 引用了每个应用的背景：最后一个值 (120px 120px) 设置天空图像的大小。

好消息是它从 IE9 开始就受支持了！

div{
  background:
    linear-gradient( to right,transparent 0, transparent  83px,#0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px,transparent 260px ),
    url("https://i.imgur.com/4HJbzEq.png") no-repeat center,
    url("https://i.imgur.com/BO6KOvw.jpg") no-repeat center;
  background-size: auto, auto, 120px 120px;
  width: 260px;
  height: 194px;
  border: 3px solid #0059dd;
  background-color: black;
}

<div></div>