HTML/JS转换工具
Unicode编码转换
当前位置:首页 > WEB前端 > CSS-HTML > 

CSS div背景颜色半透明、内容不透明方法

来源:IT技术网编辑:雨天发布于:2018-01-14人围观

前面有发表一篇关于CSS半透明的教程,不过那个是层中的所有内容都跟着半透明了。

今天这次分享层背景颜色半透明,层内的所有内容不透明。兼容IE6/IE7/IE8和火狐浏览器,css用到的\9是css hack的写法,是为了兼容不同的浏览器而使用的

 代码如下:
1
2
#div {background-color:rgba(255,255,255,0.5); background:#fff\9; filter:alpha(opacity=50);}
#div * { position:relative;}

解析:其中的“255,255,255”与“background:#fff”都是背景颜色值,需要修改这两处对应的颜色值。

 其中的 "0.5"与"opacity=50"中的50 就是透明度。

 

温馨提示,255,255,255 为红黄蓝颜色值,推荐一个小工具可以随意获取颜色的 红黄蓝颜色值。

FastStone Capture 其中的屏幕取色器可获得颜色值。

实例代码:

复制以下实例代码 再粘贴到本站提供的 在线运行代码 工具里运行查看实例效果!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!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>兼容ie6,ie7以及firefox的css透明滤镜,文字不继承其透明属性</title>
<style type="text/css">
body {background:url(http://www.16css.com/skin/mb001/images/logo.png) repeat left top}
 #container{ border:1px solid #c00; background-color:rgba(34,34,34,0.5); background:#222222\9; filter:alpha(opacity=50); width:500px; margin:40px auto; line-height:200%; font-size:14px; padding:14px;}
 #container *{ position:relative;}
</style>
</head>
<body>
 <div id="container">
     <span>一流资源网原创我说:“我是内容,所以我不会半透明。”</span>
    </div>
</body>
</html>
 

织梦二维码生成器

与相关的文章
有时间的话来看看IT界的突发事件
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片