css3 div由半透明到透明

2024-11-04

CSS实现背景透明，文字不透明，兼容所有浏览器

11.11是公司成立的日子,16岁啦,我呢3岁半,感谢公司给了这样一个平台,让我得以学习和成长,这里祝愿公司发展越来越好~ 进入主题,每年11月11号是光棍节,产生于校园,本来只是一流传于年轻人的娱乐性节日,以庆祝自己仍是单身一族为骄傲,而如今是各大商家以脱光为由打折促销的时期,成为了所谓的"购物节",双11也算了,后面还要搞双12,不得不吐槽下. 于是呢,熬夜加班做了11.11的活动,在PC端遇到了透明背景和透明图片的问题,其实以前也遇到过,只是没有总结起来,就忘记了,这次又撞墙了,

DIV背景半透明文字不半透明的样式

DIV背景半透明,DIV中的字不半透明代码如下:<body bgcolor="#336699"> <div style="filter:alpha(opacity=50);background:#ffffff;width:600;"><span style="color:yellow"> 复制代码图层背景半透明,字体颜色也半透明代码如下:</span></div> <div s

如何解决div背景色半透明，里面的图片不透明问题

用rgba可以实现,不能用opacity 背景做成透明的背景图,opacity属性影响子集的,除非把两者独立开~

使用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); 五个参

使用IE滤镜实现css3中rgba让背景色透明的效果

让背景透明,听上去不是挺容易的么? 让背景色透明,很容易想到opacity,要兼容IE的话只要加上filter:alpha(opacity=?)就行了,OK,看看这个例子. html: <div class="container" id="container"> <div class="main" id="main"> <label for="tel">电话:</l

css实现div块半透明

<!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-

css3 div垂直居中

css3: #dd{ height: 300px; background: #0000cc; display: -webkit-box; display: flex; display: -webkit-flex; -webkit-justify-content: center; -webkit-box-pack: center; justify-content: center; flex-direction: column; -webkit-flex-direction: column; -we

css3+div画大风车

今天已经礼拜三了,周天小颖家的佩佩就要结婚啦,小颖要去当伴娘了,哈哈哈哈哈哈,想想都觉得乐开了花,不过之前她给我说让我当她伴娘时,我说我要减肥,不然她那么瘦弱,我站旁边就感觉像一个圆滚滚的小皮球,小颖太胖了,唉主要是管不住嘴啊,太爱吃了,这样下去真的不好不好不好,迟早有一天会把称压坏了的,哈哈哈哈不开玩笑啦. 下面呢我们来看看到底画了个怎样的大风车呢,嘻嘻,其实这也不是小颖自己想出来的,是借鉴别人画的,小颖自己也敲了下,稍微做了些改动哈哈哈哈. 大风车吱呀吱哟哟地转这里的风景呀真好看天好看地

CSS3制作文字半透明倒影效果

效果如图.Ps.背景线条是背景图勒,和本文效果无关... html代码如下: <div class="content"> <h3 title="专业技能">专业技能</h3> <div class="next"></div> </div> 有两种实现方式: 1.box-reflect (属性详情见http://css.doyoe.com/

[转载][HTML] 普通的DIV分层以及版透明效果

来源忘记哪的了,我稍微做了点修改,想了想还是挂了转载的标签,嗯嗯: <html> <head> <title>EXAMPLE</title> </head> <body> <p>可以根据自己要求修改css样式<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='b

CSS3 div水平、垂直居中，IE9以上、Firefox、Chrome均正常

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>水平.垂直居中Div</title> <meta charset="utf-8" /> <style> .CenterBox { posit

【可视化】div背景半透明

css实现元素半透明使用 opacity:0.x 实现背景色半透明:rgba(a,b,c,x); x为透明度0,到1

div背景半透明

例子: html: <div class="erp-mask-a" > <div class="erp-mask-cell-a"> hello world </div> </div> CSS: <style> .erp-mask-cell-a{ text-align: center; background: white; width: 80%; height: 20%; position: absolute

使div变成半透明的css样式

.layer { opacity:0.9; filter:alpha(opacity=90); zoom:1; }

css3 pointer-events 让对象如透明般直接响应下层对象的鼠标事件

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

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

让透明div里的文字不透明

最近在工作中遇到一个问题,我在div里写上文字,当我把div变为半透明的时候,里面的文字也会随之透明.情况如下: <div class="box"> 这是一段不应该透明的文字 </div> .box{width: 300px;height: 25px;background: red;opacity: 0.5} 这样我的文字几乎看不清,这当然不是我想要的,随即去查询资料,找到了一个解决办法,使用css3的属性: .box{width: 300px;height:

利用CSS背景颜色属性使父级div背景透明同时避免子级标签透明。

实现背景色透明效果的代码实现各个浏览器中具备良好的透明特性的效果,IE中使用私有滤镜filter,高端浏览器使用CSS3中的rgba属性. 输入十六进制的颜色值以及透明度,自动在IE的过渡滤镜以及CSS3中的rgba属性之间进行十六进制与十进制的换算. 增加对IE9浏览器中的滤镜取消效果 ★ 鉴于需要做浏览器的hack,使用了:root来让IE9以前的浏览器不支持效果,所以增加了一个需要添加选择符类名的方式,对于这块需要大家在后期添加样式到代码中做单独的处理把CSS代码中的backgroun

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">

CSS实现DIV层背景透明而文字不透明

在我们设计制作一些网页的时候可能会用到半透明的效果,首先我们可能会想到用PNG图片处理,当然这是一个不错的办法,唯一的兼容性问题就是ie6 下的BUG,但这也不困难,加上一段js处理就行了.但假如我们需要一个半透明遮罩的弹出层,如登陆框.注册框.提示等,这时可能需要整个页面都要被半透明的遮罩层覆盖,那么如用背景平铺的话,此时此刻也许就不是一个好办法了,图片大了会影响加载速度,图片小了同样会增加页面的渲染计算量,那么这时也许就需要用CSS滤镜了. 假如有这样一个例子:“有一个DIV块,此DIV

CSS让div背景透明

div背景透明样式: 样式代码: .alert{filter:alpha(opacity=100); /* IE */ -moz-opacity:1.0; /* Moz + FF */ opacity: 1.0; height:300px; width:500px; background:#ccc; left:50%; top:50%;margin-top:-150px;margin-left:-250px;position:absolute;z-index:99; text-align:cen

css3 div由半透明到透明

热门专题