如何使圖像背景上的透明氣泡箭頭與CSS？

我附加了圖片，因此它更清晰易懂。我在證言泡沫中需要透明箭頭。如何獲得它與CSS？如何使圖像背景上的透明氣泡箭頭與CSS？

enter image description here

來源

2016-09-26 Anil Maharjan

我相信你想找的是this概念使用邊框，顏色&透明。在一些情況下使用::before & ::after僞。上面的鏈接有更多的細節。

來源

2016-09-26 07:24:57

感謝您的鏈接。我已經檢查過了。但我需要透明背景的氣泡，除了白色的邊框，所以整個div的背景圖像可以看到。 –

在背景顏色上使用不透明度。 –

body { 
 
    background-image: url('//www.gstatic.com/tv/thumb/tvbanners/12021482/p12021482_b_v8_ab.jpg'); 
 
    background-position: top center; 
 
    background-size: cover; 
 
} 
 
.buble, 
 
.buble-inner { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
.buble:after, 
 
.buble:before, 
 
.buble-inner:after, 
 
.buble-inner:before { 
 
    position: absolute; 
 
    display: block; 
 
    content: " "; 
 
} 
 
.buble-inner { 
 
    border-bottom: 1px solid #444; 
 
    color: #444; 
 
    padding: 20px; 
 
    border-radius: 10px; 
 
} 
 
.buble-inner:before { 
 
    top: 0; 
 
    left: 0; 
 
    width: 17px; 
 
    bottom: 0; 
 
    border-top: 1px solid #444; 
 
    border-left: 1px solid #444; 
 
    border-top-left-radius: 10px; 
 
    border-bottom-left-radius: 10px; 
 
} 
 
.buble-inner:after { 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 33px; 
 
    right: 0; 
 
    border-top: 1px solid #444; 
 
    border-right: 1px solid #444; 
 
    border-top-right-radius: 10px; 
 
    border-bottom-right-radius: 10px; 
 
} 
 
.buble:before { 
 
    border-left: 1px solid #231f20; 
 
    border-top: 1px solid #231f20; 
 
    top: -5px; 
 
    left: 20px; 
 
    width: 10px; 
 
    height: 10px; 
 
    -ms-transform: rotate(45deg); 
 
    -webkit-transform: rotate(45deg); 
 
    -o-transform: rotate(45deg); 
 
    -moz-transform: rotate(45deg); 
 
    transform: rotate(45deg); 
 
}

<div class="buble"> 
 
    <div class="buble-inner"> 
 
    this is message buble! 
 
    <br>you can put as much text in here as you want. 
 
    </div> 
 
</div>

所以基本上我創建絕對定位的元素（正方形），其爲45度旋轉。您可以撥打top，left,width,height以獲得所需的形狀和位置。我之後使用了僞選擇器（在這種情況下，無論它是否爲:after或:before，因爲元素是絕對定位的）

來源

2016-09-26 07:27:13 AlFra

謝謝你的評論。但是我需要整個透明氣泡，除了邊框以便背景圖像可以看到。 –

嗯嗯嗯嗯...我要去嘗試一下 – AlFra

所以這是儘可能接近我來滿足您的要求。你仍然應該調整一些屬性來獲得你想要的東西。 – AlFra

我認爲在CSS3中不可能有透明箭頭。由於使用的邊界需要指定背景的顏色，畫一個箭頭，你可以試一下：http://www.cssarrowplease.com/

我不知道是否存在其他的形式給出了這樣做...

來源

2016-09-26 07:43:16

如何使圖像背景上的透明氣泡箭頭與CSS？

回答

相關問題