css中透明度属性,css3透明属性

css中如何设置透明度

怎样在CSS样式中设置背景的透明度,下面一个具体的实例。把类为box的层设为透明。

div class="box"/div

style

.box{width:300px; height:200px; margin:0 auto; boxder:1px solid #ccc; background:#000; filter:alpha(opacity:30); opacity:0.3; -moz-opacity:0.3;-khtml-opacity: 0.3}

/style

其中background:#000; filter:alpha(opacity:30); opacity:0.3;为关键代码，当opacity值为1时，表示完全不透明，为0时表示完全透明。

其关的属性介绍如下:

opacity: 0.3；这是“最重要的”，因为它是在CSS的现行标准。这将在Firefox，Safari和Opera的大多数版本的工作。这将是你所需要的一切如果所有的浏览器都支持目前的标准。当然是他们不会错。

filter:alpha(opacity=30);这一个是针对IE浏览器

-moz-opacity:0.3;你需要这一个支持老版本的Mozilla浏览器如Netscape Navigator。

-khtml-opacity: 0.3;这是旧版本的Safari（1.×）当渲染引擎是使用仍被称为kthml，而不是目前的WebKit。

css透明度 css图片透明度设置方法

在一些网站的登录页面上，经常可以发现，一张图片叠加在另一张图片上，底层的图片若隐若现，利用css中的透明属性opacity可以实现这种效果，下面就简单介绍一下怎么写代码

新建一个HTML文件，下载两张图片，如下图，放在一个文件夹中，避免出现路径问题

代码示例如下，主要利用css伪元素::before，F_box为前置层，浮于背景上方

下面简单分解下代码，分为1，2，3，第一部分，设置背景图片001.jpg；第三部分，固定前置层图片002.jpg的位置；第二部分，利用伪元素：：before，设置属性opacity来调节透明度，取值为0-1，0是全透明，即看不见的效果，1是全不透明

代码示例中，设置opacity为0.5，半透明状态，实际页面效果如下

css设置透明度的属性

style="background:rgba(51,51,51,0.1);"

前三51为颜色的rbg代码，后面0.1背景颜色的透明度，1为不透明，0.1代表10%透明度

CSS中设置父元素透明度不影响子元素透明度(个人笔记)

css中经常会遇到设置了父元素的透明度后，会直接影响到子元素的透明度。

例如：

设置父元素opacity：0.5，子元素不设置opacity，子元素会受到父元素opacity的影响，也会有0.5的透明度。

即使设置子元素opacity：1，子元素的opacity：1也是在父元素的opacity：0.5的基础上设置的，因此子元素的opacity还是0.5。

解决方法：

为父元素设置background: rgba(0,0,0,0.5)时设置透明度，不再加opacity属性。

css中怎么样设置透明度

您好，

如果你想设置背景颜色得透明度，可以用background:rgba(r,g,b,a)其中a为透明度，从0-1

如果你想设置整体透明度，可以使用css属性opacity:0到1;