我对掩蔽/剪裁真的不太了解。我正在尝试使用svg作为聊天泡泡的箭头。这是我的笔: codepen
*, *::after, *::before {
box-sizing: border-box;
}
html, body, div, b {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
html {
font-size: 62.5%;
}
body {
font: {
size: 1.6rem;
family: 'Lato', sans-serif;
}
background-color: #132333;
overflow: hidden;
}
.chat-container {
position: relative;
display: block;
width: 100%;
height: 100%;
padding: 60px 40px;
}
.msg {
position: relative;
z-index: 100;
display: inline-block;
width: 100%;
&:not(:first-child) {
margin-top: 40px;
}
.box {
position: relative;
max-width: 900px;
width: 70%;
padding-bottom: 20px;
display: inline-block;
.user {
position: relative;
display: block;
float: inherit;
vertical-align: top;
img {
border-radius: 50%;
width: 50px;
height: 50px;
}
}
.bubble {
position: relative;
display: block;
float: inherit;
max-width: 600px;
min-height: 100%;
padding: 5px 25px;
margin: 0 auto;
border-radius: 40px;
p {
text-align: left;
font-size: 16px;
line-height: 24px;
word-wrap: break-word;
direction: ltr;
}
&::before {
content: '';
position: absolute;
display: block;
float: inherit;
top: 18px;
width: 20px;
height: 25px;
-webkit-clip-path: url(http://imgh.us/bubble.svg);
-webkit-mask: url(http://imgh.us/bubble.svg);
clip-path: url(http://imgh.us/bubble.svg#svgClip);
z-index: 0;
}
}
.info {
position: absolute;
bottom: 0;
font-size: 12px;
color: rgba(255, 255, 255, 0.3);
}
&.left {
float:left;
.user img {
margin-right: 18px;
}
.bubble {
background: linear-gradient(to right, #4589D0 0%, #1B6FAB 100%);
p { color: rgba(245, 245, 245, 0.9); }
&::before {
left: -12px;
background: #4589D0;
}
}
.info {
left: 65px;
}
}
&.right {
float:right;
.user img {
margin-left: 18px;
}
.bubble {
background: rgba(255, 255, 255, 0.1);
p { color: rgba(245, 245, 245, 0.5); }
&::before {
right: -12px;
background: rgba(255, 255, 255, 0.1);
-moz-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
-o-transform: scaleX(-1);
transform: scaleX(-1);
-ms-filter: fliph; /*IE*/
filter: fliph; /*IE*/
}
}
.info {
right: 65px;
}
}
}
}
<div class="chat-container">
<div class="msg">
<div class="box left">
<div class="user">
<img src="https://pbs.twimg.com/profile_images/515651751291006977/MrdYuJ3C_400x400.png" alt="username">
</div>
<div class="bubble">
<p>Hey digger, wie gehts dir. Hast du schon gehört das cih jetzt ein neues chatt-app erstelle für den Brwoser? Nein okey dann schau mal hier</p>
</div>
<div class="info">
<b class="pe-clock"></b> <b>Sent</b> 8:50 AM, <b>From</b> Cologne
</div>
</div>
</div>
<div class="msg">
<div class="box right">
<div class="user">
<img src="https://pbs.twimg.com/profile_images/515651751291006977/MrdYuJ3C_400x400.png" alt="username">
</div>
<div class="bubble">
<p>Hey digger, wie gehts dir.</p>
</div>
<div class="info">
<b class="pe-clock"></b> <b>Sent</b> 8:50 AM, <b>From</b> Cologne
</div>
</div>
</div>
</div><!-- .chat-container -->
所以我的问题是:如何在元素和div本身之前给svg提供相同的背景颜色。现在两者都重叠......
答案 0 :(得分:1)
最简单的解决方法是,如果您使用纯色而不是透明色。
替换
background: rgba(255, 255, 255, 0.1);
带
background: #2A3847;
由此可以看出重叠。
修改强>
如果要保持透明度,可以将气泡形状与文本分开,将其拉伸到原始气泡上,并使其呈现不透明度的纯色:
<div class="bubble">
<p>Hey digger, wie gehts dir.</p>
<div class="bubble-shape"></div>
</div>
.bubble {
position: relative;
display: block;
float: inherit;
max-width: 600px;
min-height: 100%;
padding: 5px 25px;
margin: 0 auto;
/* p css */
.bubble-shape {
position: absolute;
left: 0; top: 0; right: 0; bottom: 0;
border-radius: 40px;
z-index: -1;
&::before {
content: '';
position: absolute;
display: block;
float: inherit;
top: 18px;
width: 20px;
height: 25px;
-webkit-clip-path: url(http://imgh.us/bubble.svg);
-webkit-mask: url(http://imgh.us/bubble.svg);
clip-path: url(http://imgh.us/bubble.svg#svgClip);
z-index: -1;
}
}
p { /* css */ }
}
&.left {
/* css */
.bubble {
.bubble-shape {
background: linear-gradient(to right, #4589D0 0%, #1B6FAB 100%);
/* p css */
&::before {
left: -12px;
background: #4589D0;
}
}
}
/* css */
}
&.right {
/* css */
.bubble {
.bubble-shape {
background: rgb(255, 255, 255); /* solid color */
opacity: 0.1; /* add opacity */
/* p css */
&::before {
right: -12px;
background: rgb(255, 255, 255); /* solid color */
-moz-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
-o-transform: scaleX(-1);
transform: scaleX(-1);
-ms-filter: fliph; /*IE*/
filter: fliph; /*IE*/
}
}
}
/* css */
}
答案 1 :(得分:0)