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%;
}

这是一个小提琴http://jsfiddle.net/WUXQd/2/小提琴有评论，解释了它的工作原理。

编辑：顺便说一下，这会在图像周围创建一个遮罩和两个反向三角形，使其看起来像是一个透明的三角形。

Answer 2

这与你想要的相似吗？

.bubble {
   position: relative;
   width: 250px;
   height: 120px;
   padding: 0px;
   background: #FFFFFF;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   border-radius: 10px;
   background: url(border.jpg) repeat 0 0;
}

.bubble:after {
    content: "";
    position: absolute;
    top: 45px;
    left: -15px;
    border-style: solid;
    border-width: 15px 15px 15px 0;
    border-color: transparent #FFFFFF;
    display: block;
    width: 0;
    z-index: 1;
    border-image: url(border.jpg);
}

编辑：此链接可以帮助您：http://www.sitepoint.com/pure-css3-speech-bubbles/

箭头的讲话泡影背景也是

2 个答案: