如何獲得邊框

這裏上面的圖片是什麼，我想：enter image description here 如何獲得邊框

爲了得到吧，我使用的是左邊框，並得到子彈的圖像。但是，子彈圖像在酒吧後面。

我怎麼能得到邊界左上方的子彈圖像？

`<div id="verticalbar"> 
`...<p class = "g"><img id="bullet" src="bullet.png"/><b>Somethinghere</b></p> ...</div`>

我嘗試了一些z-index，但它不起作用。

來源

2017-09-21 NewHTML

我們需要看到的您的代碼示例能夠幫助 –

爲什麼不將邊框添加到圖像本身？ – Manav

將圖像設置爲絕對 –

使用具有邊界和絕對位置的元素的相對位置與圖像的相應位置設置。圖像必須與邊框元素的直接子此代碼正常工作：

p.g { 
    position: relative; 
    border-left: 1px solidblack; 
} 
p.g. > img { 
    position: absolute; 
    left: -6px; 
    top: 24px; 
}

（值根據需要，使用ID或類以滿足不同的圖像）

來源

2017-09-21 15:48:48 Johannes

我厭倦了，但它不起作用 – NewHTML

圖像不是'p.g'的直接子元素嗎？然後在第二條規則中擦除'>' – Johannes

爲什麼不使用border-image？

border-image: url(https://i.stack.imgur.com/lWzZd.png) 30 stretch; 
border-right: none; // Reset the border-right

#borderimg { 
 
    border: 10px solid transparent; 
 
    border-image: url(https://i.stack.imgur.com/lWzZd.png) 30 stretch; 
 
    border-right: none; 
 
}

<p id="borderimg">text</p>

來源

2017-09-21 15:44:32 Wndrr

謝謝，但子彈必須與「文本」對齊。 – NewHTML

您可以設置位置：相對於父和子彈，然後你可以使用左/右負的定位。例如

p.g{ 
    border-left:1px solid #000; 
    position:relative; 
} 
p.g img{ 
    position:relative; 
    left:-4px;/*the exact pixels you need*/ 
}

來源

2017-09-21 15:45:59

它不起作用。 – NewHTML

如何獲得邊框

回答

相關問題