在图像上放置线性渐变 [英] Putting linear-gradient over an image

问题描述

我怎么会这样做？

最终结果应该如下所示：

 < style> 
＃img1 {
 position：absolute; 
 clip-path：circle（85px at center）; 
 top：54％;剩下
：72％; 
 transform：translate（-50％，-50％）; 
} 
 
＃img2 {
 position：absolute; 
 top：54％;剩下
：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 =img1width =170height =113src =https://i.imgur.com/BO6KOvw.jpg> 
< img id =img2width =180height =180src =https://i.imgur.com/4HJbzEq.png> 
< / div> 
< / div> 
  

解决方案

使用绝对定位来对元素进行分层。此外，您的渐变元素的背景颜色样式需要透明，否则您的图像上会出现一个黑框，并且您看不到它。在这个例子中，您还会注意到边框被移动到顶层容器。

  #container {background-color：black;位置：相对;宽度：260px;高度：194px;填充：0; border：3px solid＃0059dd;}＃img1，＃img2 {user-select：none;位置：绝对;顶部：50％;剩下：50％; transform：translate（-50％，-50％）;}＃img1 {clip-path：circle（85px at center）;} #grad {position：absolute; top：0;左：0;宽度：260px;身高：194px;光标：指针; background-color：transparent; background-image：线性渐变（向右，透明0，透明83px，＃0059dd 83px，＃0059dd 86px，透明86px，透明174px，＃0059dd 174px，＃0059dd 177px，透明177px，透明260px）; }  

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

How exactly would I do this?

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

What I want to do is place the linear gradient lines over the image.

What it looks like now:

The end result should look like this:

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

解决方案

I'd put all of it in one container, use absolute positioning to layer the elements. Also your background-color style of the gradient element needs to be transparent, otherwise you've got a black box with lines over your image and you can't see it. In this example, you'll also notice that border is moved to the top level container.

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

这篇关于在图像上放置线性渐变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！