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

Alonso Quesada 发表于 Dev

阿隆索·克萨达（Alonso Quesada）

所以我真的是使用CSS的新手，我需要在和Image的顶部添加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>

上面是我尝试修改此示例以使其适合我的需求的方法，但到目前为止没有成功，因此我来这里看看是否有人可以帮助我。

最终结果应如下所示：

划分的每个部分应具有相同的大小

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

桑兹

您可以像这样原始处理-在图像上浮动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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。