Css3不透明

【Css3不透明】的更多相关文章

一个关于css3背景透明的例子

大家都知道使用opacity调节透明度不仅是背景透明了而且选择区域的文字也跟着透明了, 这是我们不想要的效果,于是强大的css3便有了只让背景透明的功能那就是background:rgba(0,0,0,0.5);里面参数不用做过多的解释了吧! 前面三个是对背景颜色的控制,全身0表示背景颜色为黑色, 最后一个是对透明度的控制,0.5表示半透明! 应用这个功能做了一个例子供大家参考全部代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran…

Css3允许你使用opacity(不透明)属性设置元素的不透明度实例: <img src="1.jpg" alt=“view”> img{ opacity:0.45: //45%不透明度 } 一个元素的opacity属性会应用到这个元素本身以及这个元素所有的子孙元素上…

利用CSS3实现透明边框和多重边框

使用background-clip属性实现透明边框 .bordertest { border: 30px solid hsla(0,0%,90%,.5); background: #bbb; background-clip: padding-box; width:500px; height:300px; } 查看运行效果使用box-shadow模拟多重边框 .bordertest1 { background: lightblue; box-shadow: 0 0 0 10px #000, 0…

CSS3背景色透明(兼容IE8)

标准浏览器通过rgba()实现背景色透明;IE8以下浏览器通过特有滤镜实现背景色透明. 代码如下: 1 /* IE8 */ 2 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000); 3 4 /* 标准浏览器 */ 5 background-color: rgba(0, 0, 0, 0.6); 上述代码中: 7F000000(十六进制):前两位数值控制透明度…

css3背景透明文字不透明

在 FF/Chrome 等较新的浏览器中可以使用css属性background-color的rgba轻松实现背景透明,而文字保持不透明.而IE6/7/8浏览器不支持rgba,只有使用IE的专属滤镜filter:Alpha来实现,但是这样写法会把文字也变为透明,因此只有在透明容器的子节点(文本节点除外)内设置position:relative才能不继承其父元素的透明滤镜,代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition…

CSS3新特性回顾

CSS3 介绍开始实例新特征简介强大的CSS选择器抛弃图片的视觉效果盒模型变化(多列布局和弹性盒模型) 阴影效果 Web字体和web Font 图标 CSS33过渡与动画交互效果媒体查询查看浏览器份额点我查看伪类(Pesudo Classes) (1)动态伪类选择器实例 :link 设置a对象在未被访问前的样式表属性 :visited 设置a对象在其链接地址已被访问过时的样式表属性 :hover 设置对象在其鼠标悬停时的样式表属性 :active 设置对象在被用户激活(在鼠标…

Html练习 | 小影志首页练习

<!DOCTYPE html> <head> <title>小影志首页练习</title> <style> /*应用全页字体*/ .pg-font{ font-family:"STXihei",Times,sans-serif; } /*首页画面*/ .pg-header{ height:550px; background-image:url(https://cdn.c7sky.com/c7v5/img/headerbg_ho…

使用CSS3的box-shadow实现双透明遮罩层对话框

box-shadow介绍在我之前的一篇文章<从天猫和支付宝身上学习opcity与rgba>中,介绍了实现双透明遮罩层效果的两种方法,分别是opacity和rgba.他们需要分别依赖于不同的html结构. 例如用opacity方法:点我查看DEMO. 我一度认为实现这种双遮罩层的效果必须需要借助background,事实上利用CSS3的box-shadow属性可以轻松模拟出这种效果.再次查看Demo. box-shadow: 0 0 0 20px rgba(0, 0 ,0 ,0.5); 五个参…

CSS3透明属性opacity

例子: <div id="fixhovertree" style="position:fixed;left:100px;width:120px;top:100px;opacity:0.5;background-color:silver;color:red">何问起<a href="http://hovertree.com/hvtart/bjae/q3etb2qv.htm" target="_blank">…

CSS3与页面布局学习笔记（六）——CSS3新特性（阴影、动画、渐变、变形( transform)、透明、伪元素等）

一.阴影 1.1.文字阴影 text-shadow<length>①: 第1个长度值用来设置对象的阴影水平偏移值.可以为负值 <length>②: 第2个长度值用来设置对象的阴影垂直偏移值.可以为负值 <length>③: 如果提供了第3个长度值则用来设置对象的阴影模糊值.不允许负值 <color>: 设置对象的阴影的颜色. 示例代码: <!DOCTYPE html> <html> <head> <meta char…