背景渐变透明，文字不透明

背景渐变透明，文字不透明

提示：写项目css样式时ui设计背景是渐变有透明度的；上面会有文字或者是其他设计；

---

ui给出的颜色和透明度如下；这样直接协会使在他之中的子盒子内容变得有透明度；但是又不可以用简单的rgba去重新写带有透明度的背景；所以可以利用伪类

background: linear-gradient(180deg, rgba(103,155,253,0.26) 0%, rgba(255,255,255,0) 100%);
 opacity:0.37

---

解决方案：

使用伪类或者添加一个子标签
注意：父盒子中添加z-index：0；伪类中添加z-index：-1

此处使用伪类更加的方便

.content{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    flex-wrap: wrap;
    // margin-left: 120px;
    // margin-right: 120px;
    margin-top: 64px;
    border-radius: 2px;
    z-index: 0;
  }
  .content::after{
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
    opacity: 0.37799999999999995;
    background: linear-gradient(180deg, rgba(103,155,253,0.26) 0%,      rgba(255,255,255,0) 100%);
  }