css透明

css透明有两种,分别是

  火狐/谷歌  opacity:0.3

  ie       filter:alpha(opacity=30)

使用css透明的时候有时候需要背景透明,而文字不透名,这时候,就不能在文字的父级去定义透明,定义了,文字也会透明的,所以需要单独添加一个透明层

例子:

1 <div class="wrap">
2     <div class="bg"></div>
3     <span>我要不透明的文字</span>
4 </div>

css

.wrap{
    position:relative;
}

.bg{
    position:absolute;
    width:100px;
    height:100px;
    background:#0ff;
    filter:alpha(opacity=30);    /*ie*/
    opacity:0.3;                       /*火狐/谷歌*/
}

.wrap span{
    position:relative;
}

这样就可以达到背景透明而文字不透明了^…^

时间: 2024-08-26 17:11:28

css透明的相关文章

(转)兼容主流浏览器的CSS透明代码

透明往往能产生不错的网页视觉效果下面是兼容主流浏览器的CSS透明代码.transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; } filter:alpha(opacity=50):这个是为IE6设的,可取值在0-100,其它三个0到1.-moz-opacity:0.5; 这个是为了支持一些老版本的Mozilla浏览器.-khtml-opacity: 0.5

css 透明 文字不透明

用两个DIV 作为容器实现 Firefox chrome IE6+ 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head>

CSS透明属性详解代码_CSS/HTML

本文介绍一下关于CSS透明属性详解及背景透明继承解决办法hack,如果你在使用css透明背景之类的此文章可帮你解决许多不兼容问题 透明往往能产生不错的网页视觉效果,先奉上兼容主流浏览器的CSS透明代码: 代码如下: .transparent_class {filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity: 0.5;opacity: 0.5;} 上面的几个属性分别是:opacity: 0.5; 这是最重要的,因为它是CSS标准.该属性

CSS透明属性详解代码

透明往往能产生不错的网页视觉效果,先奉上兼容主流浏览器的CSS透明代码: 代码如下: .transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; } 上面的几个属性分别是:opacity: 0.5; 这是最重要的,因为它是CSS标准.该属性支持Firefox, Safari和 Opera.filter:alpha(opacity=50); 这个是为IE6设的

CSS透明背景 不影响文字 支持IE6+Chrome+Firefox+等主流浏览器

你是否也在找ie透明背景的css?很多时候我们网页可能会用到透明的效果,比如一般半透明的白色背景,可能在ie7以上版本没问题,但是现在ie6和ie7的用户非常多,我们不得不考虑,可能出现这种问题时,大家可能更多是用一张半透明图片处理,当然我们的原则是能用代码解决的坚决不用图片,其中缘由就不细细道来.请直接看效果.子曰去哪是使用Windows Virtual PC中Windows XP Mode ie6测试所以可以保证原滋原味支持ie6这个奇葩! 纯css透明背景 效果演示 黑色透明背景白色透明背

css透明属性

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <style type="text/css"> 8 9 /* 10 css透明度 11 rgba(0,0,0,0.1) 四个参数,前三个表示颜

使用RGBa和Filter实现不影响子元素的CSS透明背景

点击查看原文 问题 如果我们想要一个元素拥有半透明的背景,我们有两个选择: 使用CSS和 opacity 做一张 24-bit PNG 背景图片 在CSS中使用opacity有两个问题,一是为了适应所有的浏览器,我们要对付opacity讨厌的语法:二是opacity不仅使目标元素的背 景变得半透明,而且使它所有的子元素的背景也变成了半透明.这意味着它里面所有的文本(译者注:图片也一样)都具有同样的透明度,我敢肯定没几个人想要这 样的效果.可以通过添加一些不必要的元素,使用CSS定位技巧类似的手段

CSS透明边框

作为初学者的我们,对css中半透明颜色的设置的了解大概只有rgba(),hsla()也是其中的一种方法.在实际中,他们应用于背景的原因有一下几点: 1,早期的开发者没有意识到这些新属性就是类似#ff0066和orange的色彩,而是将他们看作是图片,所以仅用于背景; 2,位背景提供降级方案比其他属性简单; 3,在边框这些属性上使用半透明颜色并不简单. 我们一般设置边框的第一步: border:10px solid hsla(0,0%,100%,.5); background:white; 按常理

浏览器css透明属性opacity

大家知道css opacity属性背景透明是常有的事,发现有时候居然存在浏览器不兼容问题,后经过查找尝试发现如下能使浏览器兼容不再有问题.有兼容问题的不妨一试. <!DOCTYPE html>  <html>  <head>  <meta charset="utf-8" />  <title>半透明演示Demo</title>  <style>  .div-a{ background:url(28674