之前做了个半透明弹层，但设置背景半透明时，子元素包含的字体及其它元素也都变成了半透明。对opacity这个属性认识的不透彻，在这里做一些总结，方便以后使用。
背景透明，文字不透明的解决方法：
为元素添加一个绝对定位的子元素，设置大小和该元素一样，把半透明加在绝对定位元素上作为遮罩，z-index设置到最底部，达到背景半透明效果。
使用CSS3新属性rgba。
实现透明的方法
转载
2021-08-05 15:27:54
6187阅读
在 FF/Chrome 等较新的浏览器中可以使用css属性background-color的rgba轻松实现背景透明，而文字保持不透明。而IE6/7/8浏览器不支持rgba，只有使用IE的专属滤镜filter:Alpha来实现，但是这样写法会把文字也变为透明，因此只有在透明容器的子节点（文本节点除外...
原创
2022-05-31 15:10:30
497阅读
简单的说就是使用rgba的写法，如例所示：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>文字透明，背景不透明</title><style>.div1{width:293px;height:219px;background:url(1.jpg) no-repeat;}.div2{widt
原创
2022-07-22 10:00:43
99阅读
在我们设计制作一些网页的时候可能会用到半透明的效果，首先我们可能会想到用PNG图片处理，当然这是一个不错的办 此时此刻也许就不是一个好办法了，图片大了会影响加载速度，图片小了同样会增...
原创
2013-10-14 06:23:48
204阅读
在我们设计制作一些网页的时候可能会用到半透明的效果，首先我们可能会想到用PNG图片处理，当然这是一个不错的办法，唯一的兼容性问题就是ie6下的BUG，但这也不困难，加上一段js处理就行了。但假如我们需要一个半透明遮罩的弹出层，如登陆框、注册框、提示等，这时可能需要整个页面都要被半透明的遮罩层覆盖，那么如用背景平铺的话，此时此刻也许就不是一个好办法了，图片大了会影响加载速度，图片小了同样会增加页面的渲染计算量，那么这时也许就需要用CSS滤镜了。假如有这样一个例子：“有一个DIV块，此DIV是黑色半透明的，但此DIV里面的内容要保持原状，不能透明”，那么我们该怎么做呢？假如HTML部分我们这样写的
转载
2014-03-25 21:38:00
785阅读
2评论
在我们设计制作一些网页的时候可能会用到半透明的效果，首先我们可能会想到用PNG图片处理，当然这是一个不错的办法，唯一的兼容性问题就是ie6 下的BUG，但这也不困难，加上一段js处理就行了。但假如我们需要一个半透明遮罩的弹出层，如登陆框、注册框、提示等，这时可能需要整个页面都要被半透 明的遮罩层覆盖，那么如用背景平铺的话，此时此刻也许就不是一个好办法了，图片大了会影响加载速度，图片小了同样会增加页面的渲染计算量，那么这时也许就 需要用CSS滤镜了。假如有这样一个例子：“有一个DIV块，此DIV是黑色半透明的，但此DIV里面的内容要保持原状，不能透明”，那么我们该怎么做呢？假如HTML部分我们这
转载
2013-12-09 22:18:00
658阅读
2评论
color:#fff; background:rgba(0,0,0,0.6); background:#000 9;/*CSS Hack,只能对ie9以下浏览器ie6,ie7,ie8有效，否侧ie10,FF,Cherome会失去透明效果*/ filter:Alpha(opacity=60);/*只对ie7,ie8有效*/
原创
2022-03-02 14:59:05
636阅读
图片.png<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> ht
原创
2022-04-24 09:34:58
421阅读
图片.png<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> ht
原创
2021-07-28 11:42:52
298阅读
图片.png<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style>
原创
2021-07-28 11:44:21
256阅读
图片.png<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style>
原创
2022-04-24 09:36:34
152阅读
CSS 图像透明/不透明 使用CSS很容易创建透明的图像。 注意：CSS Opacity属性是W3C的CSS3建议的一部分。 一、示例一：创建一个透明图像 CSS3中属性的透明度是 opacity。 首先，我们将向您展示如何用CSS创建一个透明图像 IE9，Firefox，Chrome，Opera，
转载
2018-07-23 15:53:00
472阅读
2评论
/*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;
原创
2015-06-28 10:33:09
923阅读
以前是这样实现背景透明内容不透明的：将背景与内容分别放在两个DIV中，然后使背景DIV透明，最终达到背景透明内容不透明的效果（挺麻烦的），背景透明使用的样式是{opacity:0.5;filter:alpha(opacity=50);}。最近才发现，原来还有更好的方法。支持CSS3的浏览器我们可以使用background-color:rgba(0,0,0,0.5)来实现透明，rgba中的a则代表透
转载
精选
2013-07-30 21:35:18
1649阅读
/*CSS*/.waps{ 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:500p
转载
精选
2013-06-25 14:20:57
295阅读
✨背景透明文字不透明 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>背景透明，文字不透明</title> <style> * { padding: 0; margin: 0; } body { padding: 50px; b ...
转载
2021-09-18 18:32:00
254阅读
2评论
