Html 在图像上放置线性渐变

我到底要怎么做

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

现在的样子：

最终结果应如下所示：

#img1{
位置：绝对位置；
剪辑路径：圆形（中心85像素）；
最高：54%；
左：72%；
转换：翻译（-50%，-50%）；
}
#img2{
位置：绝对位置；
最高：54%；
左：72%；
转换：翻译（-50%，-50%）；
}

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

#容器{
背景色：黑色；
位置：相对位置；
宽度：260px；
高度：194px；
填充：0；
边框：3px实心#0059dd；
}
#img1，#img2{
用户选择：无；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
#img1{
剪辑路径：圆形（中心85像素）；
}
#梯度{
位置：绝对位置；
排名：0；
左：0；
宽度：260px；
高度：194px；
光标：指针；
背景色：透明；
背景图像：线性渐变（向右，透明0，透明83px，#0059dd 83px，#0059dd 86px，透明86px，透明174px，#0059dd 174px，#0059dd 177px，透明177px，透明260px）；
}

---

为了避免添加任何不必要的标记，可以向容器div中添加伪元素

#img1，#img2{
位置：绝对位置；
最高：54%；
左：72%；
转换：翻译（-50%，-50%）；
}
#img1{
剪辑路径：圆形（中心85像素）；
}
.圆梯度{
宽度：260px；
高度：194px；
光标：指针；
背景色：#000000；
边框：3px实心#0059dd；
位置：相对位置；
}
.圆渐变：在{
内容：''；
位置：绝对位置；
宽度：100%；
身高：100%；
z指数：2；
背景图像：线性渐变（向右，透明0，透明83px，#0059dd 83px，#0059dd 86px，透明86px，透明174px，#0059dd 174px，#0059dd 177px，透明177px，透明260px）；
}

由于CSS FTW，您可以使用

background

属性来堆叠多个图像和渐变

在此代码段中，

背景大小

引用应用的每个背景：最后一个值（

120px 120px

）设置天空图像的大小

好消息是，它自IE9以来就得到了支持

div{
背景：
线性梯度（向右，透明0，透明83px，#0059dd 83px，#0059dd 86px，透明86px，透明174px，#0059dd 174px，#0059dd 177px，透明177px，透明260px），
网址（“https://i.imgur.com/4HJbzEq.png）无重复中心，
网址（“https://i.imgur.com/BO6KOvw.jpg）无重复中心；
背景尺寸：自动，自动，120px 120px；
宽度：260px；
高度：194px；
边框：3px实心#0059dd；
背景色：黑色；
}

---

是你的朋友。但是，渐变是容器div的背景。您需要将其放置在另一个元素中，并将该元素移动到图像上方。当您单击图像阴影时，是否可以删除该阴影？在我提供的示例中，我没有看到阴影。请重复右键单击图像。这不是阴影，您可以通过双击在浏览器中“选择”图像。类似于在浏览器中选择文本，你可以选择其他元素。我帮不了你。这是他的密码。：）除非你说的是选择突出显示，在这种情况下，它确实如此。我刚打开他的JSBin，双击它，它就出现了。为什么，在你上面的代码上，当你右键点击它时，它就会出现。但是在你的代码中，当你点击图片时，它不会出现。这是为什么？我怎样才能让最上面的代码，你的代码，看起来像最下面的代码？

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

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