我想显示一个带有背景图像的消息文本气泡，同时有一个右下箭头显示连续性。您将在下图中看到箭头不会继续气泡中的图像。值得一提的是，右下角的箭头是由具有相同背景的剪贴蒙版制成的。如何让底部箭头的图像与气泡的背景图像具有连续感？
您可以在下面看到使用的 HTML，以及每个 HTML 涉及的 CSS。
div {
display: block;
}
.container {
position: relative;
}
.first {
background-image: url("https://i.imgur.com/fNsIPdT.png");
width: 100%;
height: 100%;
background-size: 100% 100%;
display: block;
}
.first.container.boxBubble {
width: 250px;
height: 140px;
margin-top: 50px;
padding: 20px;
margin-left: 110px;
border-radius: 15px;
background-image:url("https://i.imgur.com/xH6YWZ3.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
text-align: center;
position: relative;
display: inline-block;
}
.tri-right-im.btm-left-in-im:after{
content: ' ';
position: absolute;
width: 50px;
height: 50px;
left: 180px;
right: auto;
top: auto;
bottom: -30px;
-webkit-clip-path: polygon(0 0, 91% 0, 100% 100%);
clip-path: polygon(0 0, 91% 0, 100% 100%);
background-image:url("https://i.imgur.com/xH6YWZ3.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
}
.talk-bubble {
margin: 40px;
display: inline-block;
position: relative;
width: 200px;
height: auto;
background-color: lightyellow;
}
.round{
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
}<html>
<body>
<div class="container first">
<div class="first container boxBubble tri-right-im btm-left-in-im"></div>
<div class="talk-bubble tri-right round btm-left-in"></div>
</div>
</body>
</html>最佳答案
HTML:
<html>
<body>
<div class="container">
<div id="clip"></div>
<div id="boxBubble"></div>
</div>
</body>
</html>
CSS:
* {
box-sizing: border-box;
}
body {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
div {
display: block;
position: relative;
}
.container {
background: url("https://image.ibb.co/dwo8rS/1.png") no-repeat center center;
background-size: 100% auto;
height: 100%;
padding: 50px;
width: 100%;
}
#clip {
background:url("https://image.ibb.co/eJbWd7/IMG_20170611_WA0025.jpg") no-repeat top center;
background-size: 100% auto;
clip-path: polygon(0 20%, 20% 0, 80% 0, 100% 20%, 100% 60%, 80% 80%, 80% 100%, 60% 80%, 20% 80%, 0 60%, 0 20%);
width: 250px;
height: 200px;
margin: auto;
z-index: 5;
}
#boxBubble {
background:url("https://image.ibb.co/eJbWd7/IMG_20170611_WA0025.jpg") no-repeat top center;
background-size: 100% auto;
border-radius: 20px;
width: 250px;
height: 160px;
padding: 0;
margin: -200px auto 0;
z-index: 9;
}
这是您可以做到的一种方式。我希望这可以帮助你! https://jsfiddle.net/keganv/3j5c4gg0/116/
关于html - 复合图像背景 CSS 显示连续性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48854244/