`
keimon
  • 浏览: 74756 次
  • 性别: Icon_minigender_2
  • 来自: 上海
社区版块
存档分类
最新评论

元素半透明

css 
阅读更多

<style>

/*指定元素透明*/

.a{

    background-color: rgba(0, 0, 0, 0.4); filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#88000000, endColorstr=#88000000);

}

/*指定元素内全部内容透明*/

.b{

    filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity:0.5; opacity:0.5; 

}

.b{

    background-color:blue;

}

</style>

</head>

 

<body>

<div class="a">

  1111111

  <p>2222222222</p>

</div>

<div class="b">

  1111111

  <p>2222222222</p>

</div>

 

知识扩展:

DXImageTransform.Microsoft.gradient 滤镜里的 startColorstr 参数值是 #AARRGGBB 形式的, 其中的AA是代表不透明度的十六进制,00表示完全透明,FF就是全不透明,化成十进制的范围就是0~255,剩下的 RRGGBB 就是颜色的十六进制代码。

举例如:background: rgba(125, 0, 0, .3); 表示的是30%不透明度的红色背景。把30%的不透明度转换成十六制呢的方法如下:先计算#AA的的十进制x,x/255 = 3/10,解得x=3*255/10,然后再把x换算成十六进制,约等于4C。

常用透明度对用关系:

.0(00) .1(19) .05(0C) .15(26)
.2(33) .3(4C) .25(3F) .35(59)
.4(66) .5(7F) .45(72) .55(8C)
.6(99) .7(B2) .65(A5) .75(BF)
.8(CC) .9(E5) .85(D8) .95(F2)

 

分享到:
评论

相关推荐

    用CSS设定一个元素半透明

    首先,CSS中的`opacity`属性是实现元素半透明的关键。`opacity`属性接受一个介于0到1之间的数值,其中0代表完全透明,1则表示完全不透明。例如,如果我们想设置一个元素的透明度为50%,可以这样写: ```css ....

    WinForm 实现半透明控件

    在Windows Forms(WinForm)开发中,创建半透明控件是一项常见的需求,它可以为应用程序提供更现代、更具吸引力的视觉效果。本主题将深入探讨如何在WinForm中实现半透明控件,包括直线、矩形、五角星等简单图形以及...

    C#半透明控件

    1. **半透明的概念**:半透明,也称为Alpha混合,是指一个物体部分透明,允许其背后的元素透过。在C#中,这种效果通过设置颜色的Alpha通道来实现,Alpha通道值介于0(完全透明)和255(完全不透明)之间。 2. **...

    css 网站半透明素材分享 PSD 半透明图片素材 网页素材

    半透明效果,也被称为Alpha透明或不透明度,允许元素背景或图像部分可见,创造出层次感和深度。在CSS中,我们可以使用`opacity`属性来调整元素的整体不透明度,或者使用`rgba()`函数和`hsla()`函数为颜色添加透明度...

    Winform半透明遮罩层

    在Windows Forms(Winform)开发中,创建半透明遮罩层是一种常见的需求,它用于提供一种视觉效果,比如在后台操作进行时提示用户或者隐藏部分界面。本篇将深入探讨如何实现这样的效果,主要涉及半透明、遮罩层以及...

    XP桌面半透明仿VISTA 窗口半透明.rar

    压缩包中的“XP桌面半透明”文件很可能是一个补丁或者一个第三方工具,它能够修改系统的用户界面元素,实现窗口标题栏的半透明效果。这可能涉及到注册表编辑、DLL文件替换或者安装特定的主题包。 使用此类工具时...

    半透明图片叠加的功能

    在上述代码中,我们首先创建了一个Canvas元素,然后加载了一张名为`test_alpha.png`的半透明图片。通过设置`globalAlpha`属性,我们可以调整图片的透明度。在绘制图片后,透明度将恢复到默认值1,即完全不透明。最后...

    宇宙星空背景半透明元素ios风商业计划书ppt模板.rar

    "宇宙星空背景半透明元素ios风商业计划书ppt模板.rar" 提供了一个独特的设计框架,结合了科技感与专业性,旨在提升你的商业提案的吸引力。下面我们将详细探讨这个模板中的关键设计元素和它们在商业计划书中的应用。 ...

    MFC 绘制半透明文字并保存为背景透明图片

    半透明,也称为alpha混合,是一种图形处理技术,允许元素(如文字)的部分或全部透过背景显示。在Windows应用程序中,通过设置像素的Alpha通道值可以实现这种效果。Alpha通道的取值范围是0(完全透明)到255(完全...

    漂亮的半透明计算器

    半透明效果,也称为alpha透明或混合模式,是通过设置元素的透明度来实现的。在CSS中,可以使用`opacity`属性来调整元素的整体透明度,或者使用`rgba()`函数在颜色值中指定透明度,以实现更精确的控制。在这个计算器...

    半透明背景图

    在计算机图形学和UI设计中,半透明背景图是一种常见的设计元素,它可以为用户界面增添层次感和视觉吸引力。在Windows编程中,尤其是在使用Visual C++(VC)进行开发时,实现半透明背景图功能是提升应用用户体验的...

    html+css透明背景

    /* 全元素半透明 */ } ``` 在上述代码中,`.box`元素的背景会变得半透明,但其内容也会受到影响,这并不符合“内容不透明”的需求。因此,我们需要使用另一种方法,即使用`rgba()`颜色值,它允许我们在定义颜色时...

    PHPWind 半透明模板

    CSS3的`opacity`属性可以控制元素的整体透明度,而RGBA允许在颜色值中设置透明度,这样就能实现背景或者特定元素的半透明效果,且不影响子元素的色彩。 此外,HTML5的新特性如`&lt;canvas&gt;`元素也可以用于创建动态的半...

    蓝色低三角形背景半透明几何图形元素商务工作汇报ppt模板.zip

    模板的主题是“蓝色低三角形背景半透明几何图形元素”,这是一类流行的视觉设计风格,常用于体现创新、科技感和现代美学。 首先,我们来详细探讨这个模板的设计元素: 1. **低三角形背景**:低三角形图案是一种...

    半透明窗体的制作实例

    半透明窗体是一种具有视觉吸引力的界面元素,它允许用户透过窗体看到背景的一部分,为应用程序提供更现代、更具交互性的外观。在Windows操作系统中,实现这种效果需要利用GDI(Graphics Device Interface)和Win32 ...

    蓝色半透明鼠标 半透明玻璃

    "蓝色半透明鼠标 半透明玻璃"这个主题聚焦于一种独特的鼠标指针设计,它将鼠标指针的外观设定为淡蓝色,同时带有半透明效果,仿佛闪烁着光圈,这在视觉上给人一种现代且科技感十足的印象。 首先,我们来解析一下这...

    css半透明效果

    首先,我们可以通过调整元素的`opacity`属性来实现半透明。`opacity`属性接受一个介于0和1之间的数值,其中0代表完全透明,1代表完全不透明。例如,设置一个元素的`opacity`为0.5,那么这个元素就会显示为50%的透明...

    QT实现半透明遮罩Demo

    在QT中实现半透明遮罩的效果,可以为用户提供更加美观和交互性的体验,尤其在提示信息、加载等待或选择操作时非常常见。 首先,我们需要理解“遮罩”(Mask)的概念。在UI设计中,遮罩通常是一个覆盖在其他元素上的...

    flash半透明遮罩

    在Flash动画设计中,"半透明遮罩"是一种常见的技术,用于实现动态的视觉效果,如隐藏或揭示部分内容,创建出层叠、过渡或者动画特效。这个标题所指的"Flash半透明遮罩"可能是一个包含此类技术的FLA文件,这是一种...

Global site tag (gtag.js) - Google Analytics