html文本框背景text怎么变透明,css怎么设置背景图片透明文字不透明？

项目中经常会用到背景图上放一些文字介绍，这里介绍两种技术来实现背景图片透明，文字不透明效果。下面我们来看一下这两种方法的使用。

CSS实现背景图片透明，文字不透明效果的两种方法：

方法一(半透明效果)：背景图 + 定位 + background:rgba(255,255,255,0.3)

示例：.demo2-bg{

background: url(http://csssecrets.io/images/tiger.jpg) no-repeat;

background-size: cover;

width: 500px;

height: 300px;

position: relative;

}

.demo2{

position: absolute;

left: 0;

right: 0;

top: 0;

bottom: 0;

width: 500px;

height: 300px;

line-height: 50px;

text-align: center;

background:rgba(255,255,255,0.3);

}

背景图半透明，文字不透明
方法：定位+ background:rgba(255,255,255,0.3)

效果图：

方法二(毛玻璃效果)：背景图 + 伪类 + flite:blur(3px).demo1{

width: 500px;

height: 300px;

line-height: 50px;

text-align: center;

}

.demo1:before{

background: url(http://csssecrets.io/images/tiger.jpg) no-repeat;

background-size: cover;

width: 500px;

height: 300px;

content: "";

position: absolute;

top: 0;

left: 0;

z-index: -1;/*-1 可以当背景*/

-webkit-filter: blur(3px);

filter: blur(3px);

}

效果图：