CSS 背景颜色透明怎么弄

外层div:

background-color: rgba(255, 255, 255, 0.9); /* 白色并且阿尔法通道是0.9*/

内层div:

background-color: #FFF; /*背景色是白色, 覆盖原来的颜色*/这有个问题。首先用最单的办法是用CSS3 background-color:rgba(0,0,0,0.5);

但这个兼容性你懂的。第二种就是他们说的这样了。这会让里面的文字一起透明。所以。办法是用两个层叠起来。

• 

  测试文字

• .toumin{ background:#1b1b1b;filter:alpha(opacity=50);opacity:0.5; position:absolute; z-index:1;}

  .text{position:relative; z-index:100;}个人建议做一个有透明度的png，然后把这个图片设置成input的背景。因为在ie里面，对于alpha滤镜，会把这个滤镜应用到对于元素及其内部所有文本上的，透明度设置得低一点还看不太出来，设置得一高，就会有各种问题了。

  

  背景图片的透明度如何设置(CSS)

  可以设置636f70793231313335323631343130323136353331333366306535啊，如图：

  常见的失败做法

  最常见的做法事设置元素的opacity,这种设置出来的效果就是内容与背景都事半透明的，严重影响视觉效果。

  还有就是设置background-color:rgba(),这种方式只能设置背景颜色的透明度。

  正确Action:

  登陆 body{background-image:url(images/bird.jpg);background-repeat: no-repeat;background-size:100%;}.login_box::before{content:"";/*-webkit-filter: opacity(50%);filter: opacity(50%); */background-image:url(images/love.jpg);opacity:0.5;//透明度设置z-index:-1;background-size:500px 300px;width:500px;height:300px;position:absolute;//一定要设置position:absolute,这样才能设置z-index，让背景处于内容的下一层top:0px;left:0px;border-radius:40px;}.login_box{position:fixed;left:50%;top:200px;width:500px;height:300px;margin-left:-250px;border-radius:40px;box-shadow: 10px 10px 5px #888;border:1px solid #666;text-align:center;}form{display:inline-block;margin-top:100px;}input{display:block;width:250px;height:30px;background-color: #888;border:1px solid #fee;outline:none;border-radius:10px;}input[type="submit"]{width:100px;height:30x;margin-left: 70px;background-color: #ccc;}span{color:red;font-size:15px;}

  ... ...透明属性：火狐下opacity：(0到1之间的数字)opacity:0.5;

  IE下 filter：alpha(opacity：0到100之间数字)filter:alpha(opacity=50)

• 打赏
• 赞
• 收藏
• 评论
• 分享
• 举报

上一篇：css背景渐变(灰色渐变背景)

下一篇：css自动换行(css自动换行属性)