具有透明内容背景的剪辑路径语音气泡

Question

我创建了一个带边框的语音气泡剪辑路径（非常重要。） 现在我试图让内容背景透明化。

这是我目前的解决方案：

＆＃13;

＆＃13;

.background {
  background: url(https://thumbs.dreamstime.com/b/birch-forest-sunny-day-green-woods-summer-spring-landscape-43067305.jpg) no-repeat;
  background-size: cover;
  text-align: center;
}

.clip-svg {
  width: 0;
  height: 0;
}

.clip-wrap {
  display: inline-block;
  vertical-align: top;
  padding: 3px;
  background-color: #639;
  background-color: rebeccaPurple;
  clip-path: url("#speechebubble-clip");
}

.clip {
  width: 180px;
  height: 180px;
  position: relative;
  background: #fff;
}

.clip {
  clip-path: url("#speechebubble-clip");
}

＆＃13;

<div class="background">
  <div class="clip-wrap">
    <div class="clip">
      test
    </div>
  </div>
</div>

<svg class="clip-svg">
 <defs>
  <clipPath id="speechebubble-clip" clipPathUnits="objectBoundingBox">
  <path width="100%" height="100%" transform="scale(0.0045, 0.00385)" id="clip-mask" d="M34.1983772,243.81581 C35.2123618,243.81581 36.0373744,244.643759 36.0373744,245.661353 L36.0373744,260 L63.450348,244.064408 C63.7301493,243.901754 64.0488773,243.81581 64.3720879,243.81581 L233,243.81581 L233,2 L2,2 L2,243.81581 L34.1983772,243.81581 Z" />
  </clipPath>
 </defs>
</svg>

＆＃13;

＆＃13;

＆＃13;

是否可以使白色内容div透明？

Answer 1

如果你对另一个想法持开放态度，我会考虑使用多个背景和sqlite来实现这个目标：

clip-path

body {
  background: url(https://thumbs.dreamstime.com/b/birch-forest-sunny-day-green-woods-summer-spring-landscape-43067305.jpg) no-repeat;
  background-size: cover;
  text-align: center;
}

.bubble {
  width: 180px;
  height: 180px;
  margin:20px auto;
  position: relative;
  border:3px solid purple;
  background:
  linear-gradient(purple,purple) 0 100%/40px 20px no-repeat,
  linear-gradient(purple,purple) 100% 100%/100px 20px no-repeat,
  linear-gradient(to bottom right,transparent 50%,purple 50.5%) 40px 100%/40px 20px no-repeat;
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 19px), 80px calc(100% - 19px), 40px 100%, 40px calc(100% - 19px), 0% calc(100% - 19px));
clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 19px), 80px calc(100% - 19px), 40px 100%, 40px calc(100% - 19px), 0% calc(100% - 19px));
}

这是另一个使用伪元素来避免<div class="bubble"> some text </div>：

的想法

clip-path

body {
  background: url(https://thumbs.dreamstime.com/b/birch-forest-sunny-day-green-woods-summer-spring-landscape-43067305.jpg) no-repeat;
  background-size: cover;
  text-align: center;
}

.bubble {
  width: 180px;
  height: 180px;
  margin:20px auto 60px;
  position: relative;
  border:3px solid purple;
  border-bottom:none;
  background:
  linear-gradient(to right,purple 20px,transparent 20px,transparent 80px,purple 0)0 100%/100% 2px  no-repeat;
  position:relative;
}
.bubble:before {
  content:"";
  position:absolute;
  bottom:-38px;
  left:17px;
  width:62px;
  height:40px;
  border-left:3px solid purple;
  background:linear-gradient(to bottom right,transparent calc(50% - 2px),purple calc(50% - 2px),purple 50%,transparent 0);
}

Answer 2

是的，您可以将代码作为基础来使语音气泡透明（请参阅附件代码段）。

您没有定义是否要让语音气泡完全透明或只是某个％。我把它设置为0.3，其中0是完全透明的。

<dependency>
            <groupId>org.liquibase</groupId>
            <artifactId>liquibase-core</artifactId>
            <version>3.5.3</version><!--$NO-MVN-MAN-VER$ -->
        </dependency>
        <dependency>
            <groupId>org.scala-lang</groupId>
            <artifactId>scala-library</artifactId>
            <version>2.11.0</version>
        </dependency>
        <dependency>
            <groupId>com.jayway.restassured</groupId>
            <artifactId>rest-assured</artifactId>
            <version>2.8.0</version>
        </dependency>

        <dependency>
            <groupId>com.h2database</groupId>
            <artifactId>h2</artifactId>
        </dependency>

.background {
  background: url(https://thumbs.dreamstime.com/b/birch-forest-sunny-day-green-woods-summer-spring-landscape-43067305.jpg) no-repeat;
  background-size: cover;
  text-align: center;
}

.clip-svg {
  width: 0;
  height: 0;
}

.clip-wrap {
  display: inline-block;
  vertical-align: top;
  padding: 3px;
  /*background-color: #639;*/
  /*background-color: red;*/
  clip-path: url("#speechebubble-clip");
}

.clip {
  width: 180px;
  height: 180px;
  position: relative;
  background: #fff;
  background-color: rgba(255, 255, 255, 0.3);
  border: 5px solid purple;
}

.clip {
  clip-path: url("#speechebubble-clip");
}