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

Question

所以我真的是 CSS 新手，我需要在图像顶部添加 3 条垂直红线，这些线必须将图像分成 4 个大小相等的部分。图像的大小始终为 465*346，到目前为止我的标记看起来像这样

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>

以上是我尝试修改this例如，让它满足我的需要，但到目前为止没有成功。

最终结果应该是这样的:

Answer 1

你可以像这样做一些原始的事情 - 在图像上 float 1px 宽的跨度，保持你的原始 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>