Question

我对掩蔽/剪裁真的不太了解。我正在尝试使用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提供相同的背景颜色。现在两者都重叠......

Answer 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 */ }

full codepen

Answer 2

我没有深入研究svgs可能遇到的问题，但看起来你的问题只是使用不透明的背景颜色。

我刚刚切换到在气泡和箭头上使用完全不透明的颜色并将其固定。

background: rgba(41, 57, 71, 1);

使用css为SVG和DIV提供相同的背景颜色

2 个答案: