div半透明背景，文字不透明

background: rgba(255, 255, 255, 0.8) !important; /* IE无效,FF有效 */ background: #fff; filter: alpha(opacity=60); 在需要不透明文字的元素样式上添加样式:position:relative;…

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

CSS实现背景图片透明和文字不透明效果

1.毛玻璃效果:背景图 + 伪类 + flite:blur(3px) width: 500px; height: 300px; line-height: 50px; text-align: center; } .demo1:before{ background: url(http://csssecrets.io/images/tiger.jpg) no-repeat; background-size: cover; width: 500px; height: 300px; content: "&…

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

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

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

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

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

我们平时所说的调整透明度,其实在样式中是调整不透明度,如下图所示例: 打开ps,在图层面板上,可以看到设置图层整理不透明度的菜单,从 0% (完全透明)到 100%(完全不透明). 实现透明的css方法通常有以下3种方式,以下是不透明度都为80%的写法 css3的opacity:x,x 的取值从 0 到 1,如opacity: 0.8 css3的rgba(red, green, blue, alpha),alpha的取值从 0 到 1,如rgba(255,255,255,0.8) IE专属滤镜 …

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

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

[小技巧]兼容IE6的纯CSS背景半透明文字不透明

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> IE背景半透明 </title> <style type="text/css"> .alpha{ width: 100px; height: 100px; color: #fff; background: rgba(0, 0…

CSS实现背景透明而背景上的文字不透明完美解决

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

css如何实现背景透明，文字不透明？

之前做了个半透明弹层,但设置背景半透明时,子元素包含的字体及其它元素也都变成了半透明.对opacity这个属性认识的不透彻,在这里做一些总结,方便以后使用. 背景透明,文字不透明的解决方法: 为元素添加一个绝对定位的子元素,设置大小和该元素一样,把半透明加在绝对定位元素上作为遮罩,z-index设置到最底部,达到背景半透明效果. 使用CSS3新属性rgba. 实现透明的方法: css3的opacity,取值从 0 到 1,如opacity : 0.5,IE9及以上版本和标准浏览器…

解决css设置背景透明，文字不透明

设置元素的透明度: -moz-opacity:0.8; /*在Firefox中设置元素透明度 filter: alpha(opacity=80); /*ie使用滤镜设置透明但是当我们对一个标签设置背景的透明度时,往往我们并不希望该标签上的文字图片也变成半透明了. 例如: <div><p>不透明</p></div> div{-moz-opacity:0.3;filter:alpha(opacity=30);background:#000;w…

CSS实现背景透明而背景上的文字不透明

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

CSS3实现背景透明，文字不透明

最近遇到一个需求,要在图片上显示带有半透明背景的文字,效果如下图所示: 看到这个需求之后,第一反应是使用CSS3中的opacity设置元素的透明度. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, init…

css实现背景透明文字不透明

设置元素的透明度: -moz-opacity:0.8; /*在Firefox中设置元素透明度 filter: alpha(opacity=80); /*ie使用滤镜设置透明但是当我们对一个标签设置背景的透明度时,往往我们并不希望该标签上的文字图片也变成半透明了. 例如: <div><p>不透明</p></div> div{-moz-opacity:0.3;filter:alpha(opacity=30);background:#000;w…

CSS实现背景透明，文字不透明（各浏览器兼容）

/*CSS*/.waps{ background:url(07158.bmp) no-repeat top center fixed; width:1004px; text-align:center; line-height:28px; font-size:12px; font-family:Arial, Helvetica, sans-serif;}.con{ text-align:left; width:500px; height:400px; margin:0px auto; paddin…

CSS实现背景透明，文字不透明（各浏览器兼容） (转)

/*CSS*/ .waps{ background:url(07158.bmp) no-repeat top center fixed; width:1004px; text-align:center; line-height:28px; font-size:12px; font-family:Arial, Helvetica, sans-serif;} .con{ text-align:left; width:500px; height:400px; margin:0px auto; padd…

CSS实现Div透明，而显示在上面的文字不透明，但也可看到显示在下面的图片内容

CSS实现Div透明,而显示在上面的文字不透明,但也可看到显示在下面的图片内容,DiV透明其实挺简单,主要是为background定义opacity属性,一般这个是最大值是1,数值越接近1,则越不透明,也就是越小越透明,颜色可以自定义.这样可以让图片上的文字更清淅,在一些图片特效中我们会见到这种效果. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/…

[置顶] css 背景透明，文字不透明，alpha滤镜，opacity，position:relative;

都知道,在alpha滤镜下,背景透明了,里面的文字也会跟随透明,我们可以设置内容的position为relative可以解决这个问题但是在position为absolute这么做却没有效果,怎么解决呢,看代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">…

CSS3实现背景透明文字不透明

最近遇到一个需求,如下图,input框要有透明效果首先想到的方法是CSS3的 opacity属性,但事实证明我想的太简单了这个属性虽然让input框有透明效果,同时文字和字体图标也会有透明效果,导致文字和字体图标被模糊,如下图于是我开始思考其它方式,最后想到了通过透明背景图来实现背景图虽然能够解决问题,但会造成空div,并且还需要设置定位感觉把简单的事情变得复杂了,我始终认为有更简单的方法最后终于被我找到了完美解决的方法——用CSS3的 rgba 来设置 background-col…

CSS实现背景透明，文字不透明

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>背景透明,文字不透明</title> <style> *{ padding: ; margin: ; } body{ padding: 50px; background: #34735D; } h1 { position: absolute; left: 400px; } .test…

JS实现背景透明度可变，文字不透明的效果

最近项目里需要实现这么个功能,类似网游中的聊天框,背景都是透明的,但是文字是不透明.所以如果简单的使用opacity(非IE)和alpha滤镜(IE)是无法实现这个效果的,会造成全部透明. 解决办法如下: 1.实现完全透明: 设置background为transparent即可,两个浏览器通用 2.实现透明度可调节: 要求改透明度,这里IE和非IE需要分开处理非IE浏览器可通过支持CSS3的方式处理(不支持CSS3的这里忽略了),css的写法是 padding: 0px; color: rgb…

css 背景透明，文字不透明

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>背景透明,文字不透明</title> <style> *{ padding: 0; margin: 0; } body{ padding: 50px; background: url(img/bg.png) 0 0 repeat; } .demo{ padding: 25px; bac…

css背景透明文字不透明

测试背景透明度为0.3.文字不透明: background-color: #000; /* 一.CSS3的opacity */ opacity: 0.3; /* 兼容浏览器为:firefox,chrome,IE9+ 文字也跟着透明*/ /* 二.CSS3的rgba */ background: rgba(0, 0, 0, 0.3); /* 兼容浏览器为:firefox,chrome,IE9+ 其中IE8,IE7,IE6解析为背景全透明文字不透明 */ /* 三.IE专属滤镜 */ filter…

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

<!DOCTYPE html><html><head><meta charset="utf-8"><title>opacity</title><style>*{ padding: 0; margin: 0;}body{ padding: 50px; background: url(img/bg.png) 0 0 repeat;}.demo{ padding: 25px; background: #000…

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…

背景透明文字不透明的最佳方法兼容IE(以背景黑色透明度0.5为例)

以背景黑色,透明度0.5举例为大家详细介绍下关于背景透明,文字不透明的最佳方法同时兼容IE,具体实现如下,感兴趣的朋友可以参考下哈希望对大家有所帮助以背景黑色,透明度0.5举例非IE:background:rgba(0,0,0,0.5); IE: filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000); IE: filter:progid:DXImageT…

css 背景透明色，文字不透明。

[原]CSS实现背景透明,文字不透明,兼容所有浏览器 background-color: rgba(0,0,0,0.5); filter:Alpha(opacity=50);…

Button或者ImageButton的背景设为透明或者半透明

Button或者ImageButton的背景设为透明或者半透明半透明<Button android:background="#e0000000" ... /> 透明<Button android:background="#00000000" ... /> 颜色和不透明度 (alpha) 值以十六进制表示法表示.任何一种颜色的值范围都是 0 到 255(00 到 ff).对于 alpha,00 表示完全透明,ff 表示完全不透明.表达式顺序是…

真~让IE8支持background: rbga; ，IE8下兼容rgba颜色的半透明背景

IE8下兼容rgba颜色的半透明背景这样的标题在百度和google搜索下很多篇文章,讲解IE8下兼容rgba的. 这些文章全部都是使用IE下的filter来使元素透明,但是这个里面会有bug. 它们的如下: background: rgba(0,0,0,.5); /*支持rgba的浏览器*/ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000); IE f…

jQuery hover事件鼠标滑过图片半透明标题文字滑动显示隐藏

1.效果及功能说明 hover事件制作产品图片鼠标滑过图片半透明,标题文字从左到右滑动动画移动显示隐藏 2.实现原理首先把效果都隐藏,然后定义一个伪类来触发所有的效果,接下来当触发伪类后会有一个遍历停止所有的效果,从新触发效果就是标题的从左边淡出和背景颜色的变化,当鼠标离开图片后触发一个遍历,停止所有动画标题回到原处不见,背景颜色变回原样主要的方法 $(".section ul li").hover(function() //伪类的触发 $(this).find(".r…