使用CSS在图像上绘制3条垂直线

问题描述

因此，我真的是使用CSS的新手，我需要在和图片的顶部添加3条垂直的红色线条，这些线条必须将图片分成4个大小相等的部分。图片的大小始终为465 * 346，到目前为止，我标记的内容如下：

So I'm really new using CSS, I need to add 3 vertical red lines on top of and Image, the lines have to split the image in 4 equally sized parts. The size of the image is always 465*346 and the mark up I have so far looks like this

CSS：

.logo-container {
    position: relative;
    height: 87px;
    width: 35%;
    margin: 0 auto;
    min-width: 144px;
}

.logo {
    position: relative;
    width: 72px;
    height: 87px;
    z-index: 2;
}

.logo-line {
    position: relative;
    display: inline-block;
    top: -50%;
    width: 20%;
    height: 2px;
    background: #333;
}

HTML：

<div id="preview-image-wrapper">
   <span class="firstOverlayLine" ></span>
   <span class="secondOverlayLine"></span>
   <span class="thirdOverlayLine"></span>
   <img id="mainImage" type="image" class="mainimage" data-bind="attr: {src: SelectedImagePath}" />
</div>

以上是我尝试修改示例可以满足我的需求，但是到目前为止没有成功，所以我来这里看看是否有人可以帮助我。

The above is my attempt to modify this example to make it fit my needs, but with no success so far, so I came here to see if anyone could help me out.

最终结果应类似于：

在此先感谢您提供的任何帮助。

Thanks in advance for any help provided.

推荐答案

您可以像这样原始处理-在图像上浮动1px宽的跨度，并保留原始HTML：

You can do something raw like this - floating 1px-wide spans over the image, keeping your original HTML:

div {
  width: 465px;
  position: relative;
}

span {
  position: absolute;
  display: block;
  height: 346px;
  width: 1px;
  background: red;
}

.firstOverlayLine {
  left: 25%;
}

.secondOverlayLine {
  left: 50%;
}

.thirdOverlayLine {
  left: 75%;
}

<div id="preview-image-wrapper">
   <span class="firstOverlayLine"></span>
   <span class="secondOverlayLine"></span>
   <span class="thirdOverlayLine"></span>
   <img src="http://placehold.it/465x346">
</div>

这篇关于使用CSS在图像上绘制3条垂直线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！