字体背景透明

1.字体背景全部透明

原始：

h2 {

　　color: rgb(0, 0, 0);

　　background-color: rgb(244,67,54);

　　opacity: 0.5;

}如图：

2.背景透明文字不透明

h2 {

　　color: rgb(0, 0, 0);

　　background-color: rgba(244,67,54, 0.5);

}如图：

3.只让文字透明 可以用来创建剪纸效果

h2 {

　　color: rgba(0, 0, 0, 0.5);

　　background-color: rgb(244,67,54);

}如图：

4.设置边框10px 透明度为30%的边界

h2 {

　　color: rgb(0, 0, 0);

　　background-color: rgb(244,67,54);

　　border: 10px solid rgba(255, 255, 255, 0.3);

}如图：

5.毛玻璃效果

div{

　　background-image:url();

　　filter:blur(3px);

}

 

 

图片模糊，文字不模糊：filter+伪类

  div:before{

　　background-image:url();

　　filter:blur(3px);

　　content: '';
　　position: absolute;
　　top:0;
　　left: 0;
　　bottom: 0;
　　right: 0;
　　z-index: -1; /*作为背景*/

}

 

 

 6.背景图透明，文字不透明

法一，同上，通过伪类来实现，filter:blur(3px);改为透明属性：filter:opacity(30%);

法二，设置父子div：

.div{
　　background: url() no-repeat;
　　background-size: cover;

　　width:700px;
　　height: 300px;
}
.div-child{
　　color:red;
　　height:100%;
　　text-align: center;
　　background:rgba(255,255,255,0.3);
}