Question

我到底该怎么做？

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

现在的样子：

最终结果应如下所示：

mpz_init

Answer 1

我将所有这些放在一个容器中，使用绝对定位来分层元素。您的渐变元素的背景颜色样式也需要是透明的，否则您的图像上会出现一个带有线条的黑框，您无法看到它。在此示例中，您还会注意到边框已移至顶级容器。

＆＃13;

#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 ); 
   
  }

＆＃13;

<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>

＆＃13;

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属性来堆叠多个图像＆amp;梯度。

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

好消息是IE9支持它！

＆＃13;

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;
}

＆＃13;

<div></div>

＆＃13;

在图像上放置线性渐变

3 个答案: