代码是

filter: Alpha(Opacity=50)

background-color: rgba(0, 0, 0, 0.5);

这种设置层里面所有的东西都透明了。

其实说到半透明,相信绝大部分同仁应该都知道的一种很常用的方法,即css3的opacity结合ie

alpha滤镜即可。比如:

.translucent{

background:#000;

opacity:

0.5;

filter:

progid:DXImageTransform.Microsoft.alpha(opacity=50);

}

上面这个样式类即为一个背景色为黑色,元素半透明的样式类。这也是目前半透明遮罩层最常用的方法,(ps:有个小地方需要注意,在ie6下需要触发它的haslayout或包裹性才有效,不过一般不存在问题,因为一般这种半透明遮罩的元素都是绝对定位的,overflow:hidden;或position:absolute;或float或display:inline-block都可以触发元素包裹性..这个问题扯远了,以后会单独再出一篇关于包裹性的文)

恩,正如各位看官所见,打开的层的确半透明了,不过半透明的好彻底,以至于层里面所有子元素都半透明了...但是我的层里面的图片和那个红色的块本来是不打算透明的,我只要背景色透明就好了..所以这个方法并没有满足这个需求。

于是,针对只要背景色透明的东东,应该有另一种办法,就是css3的rgba属性结合ie的gradient滤镜

.bg-translucent{

background:rgba(0,0,0,0.5);

filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F000000,endcolorstr=#7F000000);

}

这个稍微复杂一点

在CSS中有一个Alpha滤镜,这个滤镜可以设置目标元素的透明度。还可以通过指定坐标,从而实现各种不同范围的透明度。具体语法如下:

{filter:

alpha(opacity=#opacity,finishopacity=#finishopacity,style=#style,startx=#startx,starty=#starty,finishx=#finishx,finishy=#finishy)}

具体参数含义如下:

opacity 透明度。默认的范围是从0 到 100,他们其实是百分比的形式。也就是说,0代表完全透明,100代表完全不透明。 finishopacity 是一个可选参数,如果想要设置渐变的透明效果,就可以使用他们来指定结束时的透明度。范围也是0 到 100。 style 指定透明区域的形状特征:0 代表统一形状,1 代表线形,2 代表放射状,3 代表矩形 startx 渐变透明效果开始处的 X坐标。 starty 渐变透明效果开始处的 Y坐标。 finishx 渐变透明效果结束处的 X坐标。 finishy 渐变透明效果结束处的 Y坐标。

以上的参数可以选用,可以只设置一个opacity

例如:

{filter:alpha(opacity=50)}

这个就是半透明的设置,只要把{}中的代码加入到需要设置的模版中的{}的即可,记得与前面的代码之间要用";"间隔,不然设置是无效的

例如:

我要设置模版区域背景的颜色(白色)+半透明[就是我现在blog的效果]

只要在

.modbox{}

.modbl{}

.modbc{}

.modbr{}

中都设置background-color:white

这些就是模版背景设置的ID

然后再在.modbox,.modbl,.modbc,.modbr{}如果没有这个的话可以自己加一个

中加入filter : alpha(opacity=80)就可以达到所有模版的背景都是半透明的效果了

如果希望像我这样只显示blog的背景,别的都全透明的话,那么就在别的模版中加入背景全透明的代码即可

background:transparent 这就是背景全透明的代码

不过这样的话,相关模版的主要区域是透明了,可是底下还会有一条颜色留着的,所以另外还要在

.modbl{}

.modbc{}

.modbr{}

中也加入背景全透明的代码,这样才能让模版区域完全透明,就像我现在的效果一样

另外这个参数目前只能用于背景色的设置,背景图片无法设置为半透明

css背景颜色设置为半透明,关于css设置背景色透明,半透明相关推荐

  1. 从零开始学前端:CSS背景颜色 --- 今天你学习了吗?(CSS:Day09)

    从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:CSS字体属性和文本属性 - 今天你学习了吗?(CSS:Day08) 文章目录 从零开始学前端:程序猿小白 ...

  2. html背景图片横屏,CSS背景颜色 背景图片 居中 重复 固定样式background经验篇

    我们使用CSS Background样式属性,可以设置网页背景单一颜色.网页背景为图片.网页背景图片居中于网页.网页背景图片网页固定位置.网页背景图片中网页中重复平铺等css背景样式介绍与案例讲解. ...

  3. 计算机底纹不起作用,CSS - 背景颜色在IE11中不起作用(CSS - background-color not working in IE11)...

    CSS - 背景颜色在IE11中不起作用(CSS - background-color not working in IE11) 我有以下代码: .skills_column { padding: 5 ...

  4. html滚动背景色没了,css背景颜色不显示怎么解决

    css背景颜色不显示怎么解决 div css新手布局会遇到布局的背景颜色无法显示,一般布局背景无法显示通常原因如下: 1.由使用float浮动造成浮动产生无法显示css背景颜色 2.高度不够而产生背景 ...

  5. css中背景颜色用哪个,CSS 背景颜色

    颜色背景 CSS中背景颜色由background-color决定,这里的背景颜色会渲染padding和content,不会渲染border和margin部分. 在css3中可以通过background ...

  6. php渐变背景颜色,css背景颜色渐变案例:线性渐变和径向渐变效果实例详解

    渐变是两种或多种颜色之间的平滑过渡.以前,必须使用图像来实现这些效果.但是,通过使用 CSS3 渐变(gradients),可以减少下载的事件和宽带的使用.此外,渐变效果的元素在放大时看起来效果更好, ...

  7. CSS背景颜色设置背景附着背景平铺背景位置背景简写背景透明

    CSS背景设置方法及背景附着 1.背景颜色(color) 语法: background-color:颜色值; 默认值是 transparent 透明的 2.背景图片(image) 语法: backgr ...

  8. html背景颜色透明度hex,CSS背景颜色设置透明度的两种方法(8位hex和rgba)

    目录 一. 6位HEX转RGBA 二.8位HEX 在写微信小程序的时候,有个需求是按背景颜色 background-color要设透明度0.85,让背景图片 background-image透一点出来 ...

  9. css 背景颜色 background属性

    背景颜色 background 含义: 背景是指在盒子结构中,衬托在边框线范围以内的背景颜色或背景图. 可以设置背景颜色,或背景图,或同时设置.其中背景图有多项参数可设置. 主要的背景属性设置有: 设 ...

  10. css背景颜色占全部屏幕,css怎样让背景充满整个屏幕

    炫酷时钟 body{ height: 100%;color: #51555c; background: url("./img/bg1.png") no-repeat; /* 背景图 ...

最新文章

  1. 生信服务器 | 更改 CentOS/RHEL 6/7 中的时区
  2. python在运行调试程序时常出现的错误有_Python 如何调试程序崩溃错误
  3. java开头流程_【java读书笔记】——java开篇宏观把控 + HelloWorld
  4. python建立数据库和基本表_python基础 — 链接 Mysql 创建 数据库和创表
  5. 搞定Server 2008蓝牙问题
  6. C# 建立Socket连接 持续发送屏幕截图
  7. (49)FPGA状态机描述(二段式)
  8. windows下vbs脚本隐藏控制台
  9. ReactNative集成百度语音合成
  10. 向中级程序员转变的10个建议
  11. 麦肯锡:数字化转型四步法!
  12. WLAN无线技术基本概念(802.11a/b/g/n/ac/ax区别,频段,信道概念)
  13. 关于OC中委托(代理人)的理解
  14. 贵州大学计算机研究生排名,贵大计算机研究生怎么样?
  15. java 独木桥_独木桥 - pandaB - 博客园
  16. locust测试工具
  17. 移动互联网十大创新应用
  18. 三菱mr系列服务器故障代码a6,三菱数控系统伺服故障和报警代码大全,超实用!...
  19. 广域网优化技术领跑IT投资
  20. 无意中参加了infoQ的一期活动,获得了所有奖项,哈哈哈。。。

热门文章

  1. 分布式:分布式系统的设计
  2. win10 环境下Excel的MySQL ODBC驱动下载及安装
  3. PowerShell Gallery .nupkg手动下载将.nupkg文件重命名为.zip,然后将内容提取到本地文件夹中
  4. 制作NUGET包制作nupkg包
  5. sprintf_s用法c语言,sprintf_s函数的使用
  6. 计算机图形学上机(一)改进的DDA算法
  7. loading加载的gif图
  8. 人工智能面试问题整理
  9. 【预测模型-ELAMN预测】基于哈里斯鹰算法优化ELMAN神经网络实现数据回归预测matlab代码
  10. ADC的DMA多通道数据采集(雨滴传感器+光敏传感器)