打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
css3背景透明,文字不透明

在平常的工作中,特别是那种弹窗,背景是透明的,而里面的文字是不透明的。平常我们一般都会用到,定义三个层,一个父层相对定位,一个透明层绝对定位,并且要设定一个高度,还有一个层就是内容层,也是用绝对定位。这样相对比较麻烦点。习惯了使用”opacity“,它很简单易用,但是,opacity会使所有的子元素都变成透明的,通过RGBa,我们可以将一个元素设置为透明,而不会影响其子元素

现在用rgba可以很好的解决这个问题。

下面是整个demo的代码:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-eqUIv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>无标题文档</title>
<style type=”text/css”>
    *{ margin:0; padding:0;}
    body{ background:url(pic/4.jpg) no-repeat; width:293px; height:250px;}
    .container{background:#000; width:293px;  background:rgba(0,0,0,0.4); filter:alpha(opacity=40); }
    .container .sub_con{ position:relative; color:#fff; width:100%;}
</style>
</head>
<body>
<div class=”container”>
    <div class=”sub_con”>流浪是好人,好人,一定是好人</div>
</div>
</body>
</html>

css关键解释:

.container{background:#000; width:293px;  background:rgba(0,0,0,0.4); filter:alpha(opacity=40); }
    .container .sub_con{ position:relative; color:#fff; width:100%;}

主要是container里面的background:rgba(0,0,0,0.4)这个0.4就是透明度。可以声明一个保留色彩。这个色彩应该是可靠的——所有的浏览器都支持,但IE不支持rgba,IE可以用平常的filter:alpha(opacity=40)来设置,子级要设置position:relative来脱离文档

查资料知道:

RGBa是一种在CSS中声明包含透明效果的颜色的方法,语法为

div{background:rgba(0,0,0,0.4)}


本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
CSS3 RGBA 属性高级用法
兼容IE、Firefox的背景半透明内容不透明设置
CSS 技巧
CSS3代码教程-毛玻璃效果
更多的样式
Web上的图片技巧
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服