線與空間img元素

img:after, 
 
img:before { 
 
    /*POSSIBLE SOLUTION WITH PSEUDO?*/ 
 
}

<img src="https://dummyimage.com/vga">

我必須畫上的img元件的左側兩條垂直線。該行應該有width的5px。第一行是在img的左側。直到第二行開始，還有另一個空間5px。

心中已經發現span元素此解決方案：Using CSS to Draw 3 Vertical Lines on and Image

是否有bether替代解決方案？我試圖用僞:after和:before但沒有得到它。有任何想法嗎？

原圖：

圖像的線條：

來源

2017-10-16 MrBuggy

到底是什麼問題，你正在與你目前的做法？另外，請包括您當前使用的HTML和CSS，以便我們提供幫助。 – FluffyKitten

我不相信你可以通過其他方式來完成，而不是跨越原始圖像。 – tilz0R

您是否嘗試過使用圖像的父/包裝的':: before' /':: after'僞元素？ – Krusader

你需要用的圖像，並把僞元素的包裝。嘗試像這樣：

.my-image-wrap { 
 
    position: relative; 
 
} 
 

 
.my-image-wrap:before, 
 
.my-image-wrap:after { 
 
    content: ''; 
 
    position: absolute; 
 
    display: block; 
 
    width: 5px; 
 
    background-color: red; 
 
    left: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
} 
 

 
.my-image-wrap:after { 
 
    left: 10px; 
 
}

<div class="my-image-wrap"> 
 
    <img src="https://dummyimage.com/vga"> 
 
</div>

來源

2017-10-16 12:27:19 caramba

帶包裝的解決方案非常完美，謝謝！ – MrBuggy

下面的代碼片段演示瞭如何可以實現使用pseudo-elements應用於包含父元素預期的結果。

.img-wrapper:before,.img-wrapper:after { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    width: 5px; 
 
    background: red; 
 
    height: 99%; 
 
} 
 

 
.img-wrapper:before { 
 
    left: 0; 
 
} 
 

 
.img-wrapper { 
 
    position: relative; 
 
} 
 

 
.img-wrapper:after { 
 
    left: 10px; 
 
}

<div class="img-wrapper"><img src="https://dummyimage.com/vga"></div>

來源

2017-10-16 12:32:13 UncaughtTypeError

可以使圖像背景元素，然後添加邊框和僞元素：

div { 
 
    width: 600px; 
 
    height: 300px; 
 
    background: grey url("http://www.lorempixel.com/600/300"); 
 
    border-left: 5px solid red; 
 
    box-sizing:border-box 
 
} 
 

 
div:after { 
 
    content: ""; 
 
    width: 5px; 
 
    height: 300px; 
 
    margin-left: 10px; 
 
    background: red; 
 
    position: absolute; 
 
}

<div></div>

來源

2017-10-16 12:33:35 sideroxylon

線與空間img元素

回答

相關問題