html - 箭头的讲话泡泡背景

Question

您好，我做了一个对话泡泡，但我想让背景图像也进入箭头。我确实也找到了一些示例，但是根据我的需要编辑它们会让人感到困惑，因为我无法将箭头定位到我希望它最终位于的位置。

.bubble {
    position: relative;
    width: 227px;
    height: 310px;
    background-color:white !important;
    background: url(../images/thepartypeople/assets/main-bg.png) repeat 0 0;
}
.bubble:after {
    content: "";
    position: absolute;
    top: 128px;
    left: -15px;
    border-style: solid;
    border-width: 15px 15px 15px 0;
    border-color: transparent #000;
    display: block;
    width: 0;
    z-index: 1;

}

这是我的对话泡泡代码。

我们将不胜感激

非常感谢。

Answer 1

这是别处回答的问题

Creating a transparent arrow above image in CSS3

但是，我会为您提供特定答案的 HTML 和 CSS。顺便说一句，我稍微更改了您的 HTML。

<div class="bubble">
    <img class="test" src="http://placekitten.com/241/310" alt="kitten" />
</div>

您可以仅使用 div .bubble 保留它并设置背景:url(' http://placekitten.com/241/310 ');但图像必须恰好是 div 的高度和宽度。

.bubble {
    position:relative;
    width:241px;
    height: 310px;
}
.bubble:before, .bubble:after {
    content:'';
    position:absolute;
    width:0;
    border-left:15px solid white;
    left:0;
}
.bubble:before {
    top:0;
    height:128px;
    border-bottom:15px solid transparent;
}
.bubble:after {
    top:143px; 
    bottom:0;
    border-top:15px solid transparent; 
}
.test {
    display:block;
    width:100%;
}

这是一个 fiddle http://jsfiddle.net/WUXQd/2/ fiddle 中有注释解释了它是如何工作的。

编辑:顺便说一句，这会在图像周围创建一个蒙版和两个倒三 Angular 形，使其看起来像是一个透明三 Angular 形。