1

嗨，我已经做了一个气泡，但我想让背景图像也进入箭头。我也确实找到了一些示例，但编辑它们以满足我的需要令人困惑，因为我无法将箭头定位到我希望它最终出现的位置。

.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;

}

这是我的语音气泡代码。

任何帮助都会得到帮助

非常感谢。

4

2 回答 2

1

这是其他地方回答的问题

在 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/小提琴中有评论解释了它是如何工作的。

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

于 2013-09-11T03:48:32.803 回答
0

这和你想要的相似吗？

.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/

于 2013-06-11T13:19:48.347 回答