时间戳

首页 > 解决方案 > 在css中创建具有特定形状的对话气泡时，在后面设置透明度

html - 在css中创建具有特定形状的对话气泡时，在后面设置透明度

问题描述

在此处输入图像描述

我正在尝试用 css 实现上述语音气泡形状。正文背景为渐变色时如何设置透明度？

after的背景设置为透明时，指定为before的背景。如果是这样，我应该改变之前和之前的顺序来实施它吗？帮助！

.body {
        padding: 30px 0 20px 0 !important;
        background: linear-gradient(to right, #E51D38,#C90E97);
    }

    .speech-bubble {
        text-align: center;
        width: 50%;
        position: relative;
        padding: 50px;
        margin: 1em auto 50px;
        text-align: center;
        color: black;
        background: white;
        border-radius: 30px;
    }

    .speech-bubble:before {
        content: "";
        position: absolute;
        z-index: 3;
        left: -22px;
        top: 0;
        width: 40px;
        border-bottom: 35px solid white;
        border-top-right-radius: 25px;
    }

    .speech-bubble:after {
        content: "";
        position: absolute;
        z-index:3;
        left: -28px;
        top: -3px;
        height: 38px;
        width: 28px;
        background: lightgray;
        border-top-right-radius: 20px;
    }
<div class="speech-bubble">Hello, world.</div>

标签： htmlcssbackground

解决方案

使用渐变着色，然后简单地控制元素的宽度/高度：

body {
  padding: 30px 0 20px 0 !important;
  background: linear-gradient(to right, #E51D38, #C90E97);
}

.speech-bubble {
  text-align: center;
  width: 50%;
  position: relative;
  padding: 50px;
  margin: 1em auto 50px;
  text-align: center;
  color: black;
  background: white;
  border-radius: 30px;
}

.speech-bubble:before {
  content: "";
  position: absolute;
  width:50px;
  height:40px;
  top:0;
  left:-25px;
  background: radial-gradient(50% 100% at bottom left,#0000 98%,white);
  border-top-right-radius: 100%;
}
<div class="speech-bubble">Hello, world.</div>

推荐阅读