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

上述是我尝试修改这个示例以满足我的需求，但迄今为止没有成功。

最终结果应该如下所示：

- Alonso Quesada

---

你能添加一张它应该是什么样子的图像吗？我很难想象最终的结果。 - Ian Hazzard

你需要使用img元素，还是将其作为预览图像包装器div的背景图像会更好？ - robjez

完成了，它们在示例中不相等，但是想法是让所有4个部分的大小大致相同。 - Alonso Quesada

@robjez 我需要保留img标签。 - Alonso Quesada

我的答案已经更新。 - Weafs.py

Answer 1

您可以这样做-在图像上漂浮1像素宽的span，保留您原始的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>

- Shomz

---

这很好用......只是又有一个快速问题，在实施后，我意识到所有图像上都有大约15像素的标题，所以我现在希望红线不要一直延伸到图像顶部，而是距离顶部约15像素，所以我尝试添加一个CSS规则Top:15px，但它是从页面顶部而不是Div开始的...有什么好的建议吗？ - Alonso Quesada

你可以尝试使用 margin-top: 15px。 - Shomz

Answer 2

你可以使用伪元素:before和:after。

#img {
  position: relative;
  width: 465px;
  height: 346px;
  background: url(http://dummyimage.com/465x346/ddd5ed/fff);
  border: 1px solid red;
}
#img:before, #img:after {
  position: absolute;
  content: '';
  width: 25%;
  height: 100%;
  top: 0;
  left: 25%;
  border-left: 1px solid black;
  border-right: 1px solid black;
  box-sizing: border-box;
}
#img:after {
  left: 75%;
  border-right: 0;
}

<div id="img"></div>

- Weafs.py

---

@user2570380 - 已更新！ - Weafs.py

仍然是两行 - 你用伪元素很难制作成三行。 - Shomz

将宽度设为25％，左侧设为50％。 - Ankit Chaudhary

因为抄袭@web-tiki的代码，只是改变了颜色而被踩。 - Shomz

轻松点，任何人都可以使用“我的代码”，我只是想帮忙 :) - web-tiki

Answer 3

使用无序列表的替代方案：

http://jsfiddle.net/a4q63mwc/

<div id="preview-image-wrapper">
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <img src="http://placehold.it/465x346" />
</div>   


div, img {
  width: 465px;
  height: 346px;
  position: relative;
}

ul { 
    margin:0;
    padding:0;
    list-style-type: none;
    position: absolute;
    display: block;
    height: 346px;
    width:100%;
    z-index:200;
    overflow:hidden;
}
li { 
    height:346px; 
    border-right:1px solid red; 
    width:25%; 
    display:inline-block;
    margin-right: -4px;
}

- robjez

Answer 4

如果有人需要水平线。

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

span {
  position: absolute;
  display: block;
  height: 2px;
  width: 465px;
  background: red;
}

.firstOverlayLine {
  top: 50%;
}

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

- kds7ap