将图像放置在边框和两条垂直线的后面 [英] Placing an image behind a border and 2 vertical lines

问题描述

我想要做的是将图像放置在边框和2条垂直线的后面.我当时以为垂直线可能是SVG，但不确定如何设置.

What I want to do is to place an image behind a border and 2 vertical lines. I was thinking the vertical lines could be SVG, but I'm not sure how to set this up.

https://jsfiddle.net/q5xnxqkk/

<svg style="background-image: linear-gradient( to right,#000000 83px,#0059dd 83px, #0059dd 86px, #000000 86px, #000000 174px, #0059dd 174px, #0059dd 177px, #000000 177px );border: 3px solid #0059dd;padding: 62px 100px 62px 100px;  cursor: pointer;background-color:black;"
  width="60" height="72" viewBox="0 0 60 72">
    <path d="M30.001,12C16.767,12,6,22.765,6,35.999s10.766,23.999,24,23.999s24-10.765,24-23.999S43.235,12,30.001,12L30.001,12z" fill="#000000"></path>
    <path d="M39.201,34.34l-12-9c-0.607-0.455-1.419-0.528-2.095-0.189c-0.677,0.339-1.106,1.031-1.106,1.789v18c0,0.758,0.428,1.45,1.106,1.789c0.283,0.142,0.589,0.211,0.894,0.211c0.425,0,0.847-0.136,1.2-0.4l12-9c0.503-0.377,0.8-0.97,0.8-1.6C40.001,35.31,39.705,34.717,39.201,34.34z"
    fill="#E6DC00"></path>
    <path fill="#E6DC00 " d="M30,15c11.598,0,21,9.402,21,20.999s-9.401,20.999-21,20.999c-11.599,0-21-9.402-21-20.999S18.401,15,30,15 M30,9C15.112,9,3,21.111,3,35.999s12.112,26.999,27,26.999c14.888,0,27-12.111,27-26.999S44.888,9,30,9L30,9z" /></path>
  </svg>

推荐答案

框内的蓝线不是SVG路径，它们是线性渐变的一部分，因为在那里，我假设您知道背景图片的方式作品.

The blue lines inside the box are not SVG paths, those are part of the linear-gradient, since you have it there I assume you know about how background image works.

有两种方法，一种是从SVG的background-image中删除linear-gradient部分，而是使用url('URL-TO-IMAGE')，对于行，请使用SVG的<path>.我不是SVG专家，所以无法告诉您该怎么做.

There can be two approaches, one is to scrap the linear-gradient part from your SVG's background-image and instead use the url('URL-TO-IMAGE'), and for the lines use SVG's <path>. I am not an expert in SVG so can't tell you how to do that.

我推荐的第二种方法是使用 multiple背景，是的，CSS允许使用背景图像/渐变/颜色的图层，这非常简单.

The second approach which I would recommend is to use multiple backgrounds, yes, CSS allows layers of background images / gradients / colors and it is pretty simple.

background-image: url("image-1.png"), url("image-2.png");

或

background-image: linear-gradient(....), url("image-2.png");

当前您的SVG的background-image属性为

Currently your SVG's background-image property is

background-image: linear-gradient( to right,#000000 83px,#0059dd 83px, #0059dd 86px, #000000 86px, #000000 174px, #0059dd 174px, #0059dd 177px, #000000 177px );

要在当前图像后面添加另一个图像/线性渐变，只需使用逗号分隔各个部分，就像这样

To have another image / linear gradient behind the current one you just separate the parts using a comma, like this

background-image: linear-gradient( to right,#000000 83px,#0059dd 83px, #0059dd 86px, #000000 86px, #000000 174px, #0059dd 174px, #0059dd 177px, #000000 177px ), url('http://via.placeholder.com/200x200');

但是，即使执行此操作，也不会在 http://via.placeholder.com上看到该图像/200x200 ，这是因为您的线性渐变中存在完全不透明的颜色，所以，让我们将线性渐变值中的所有#000000更改为transparent

But even if you do this you won't see the image at http://via.placeholder.com/200x200 in the box, that is due to the fact that there are fully opaque colors in your linear-gradient, well, let's change all the #000000 in your linear-gradient's value to transparent

background-image: linear-gradient( to right,transparent 83px,#0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px ), url('http://via.placeholder.com/200x200');

这是一个工作示例:

<svg style="background-image: linear-gradient( to right,transparent 83px,#0059dd 83px, #0059dd 86px, transparent 86px,transparent  174px, #0059dd 174px, #0059dd 177px, transparent 177px ), url('http://via.placeholder.com/200x200');border: 3px solid #0059dd;padding: 62px 100px 62px 100px;  cursor: pointer;background-color:black; background-position: center;"
  width="60" height="72" viewBox="0 0 60 72">
    <path d="M30.001,12C16.767,12,6,22.765,6,35.999s10.766,23.999,24,23.999s24-10.765,24-23.999S43.235,12,30.001,12L30.001,12z" fill="#000000"></path>
    <path d="M39.201,34.34l-12-9c-0.607-0.455-1.419-0.528-2.095-0.189c-0.677,0.339-1.106,1.031-1.106,1.789v18c0,0.758,0.428,1.45,1.106,1.789c0.283,0.142,0.589,0.211,0.894,0.211c0.425,0,0.847-0.136,1.2-0.4l12-9c0.503-0.377,0.8-0.97,0.8-1.6C40.001,35.31,39.705,34.717,39.201,34.34z"
    fill="#E6DC00"></path>
    <path fill="#E6DC00 " d="M30,15c11.598,0,21,9.402,21,20.999s-9.401,20.999-21,20.999c-11.599,0-21-9.402-21-20.999S18.401,15,30,15 M30,9C15.112,9,3,21.111,3,35.999s12.112,26.999,27,26.999c14.888,0,27-12.111,27-26.999S44.888,9,30,9L30,9z" /></path>
  </svg>

请学习代码并进行试验，这是了解更多信息的最佳方法！

Please study the code and experiment with it, that's the best way to learn more!

这篇关于将图像放置在边框和两条垂直线的后面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！