CSS 图像透明度

w3school 在线教程

## CSS 基础教程

- CSS 教程
- CSS 简介
- CSS 基础语法
- CSS 高级语法
- CSS 派生选择器
- CSS id 选择器
- CSS 类选择器
- CSS 属性选择器
- CSS 创建

## CSS 样式

- CSS 背景
- CSS 文本
- CSS 字体
- CSS 链接
- CSS 列表
- CSS 表格
- CSS 轮廓

## CSS 框模型

- CSS 框模型概述
- CSS 内边距
- CSS 边框
- CSS 外边距
- CSS 外边距合并

## CSS 定位

- CSS 定位概述
- CSS 相对定位
- CSS 绝对定位
- CSS 浮动

## CSS 选择器

- CSS 元素选择器
- CSS 选择器分组
- CSS 类选择器详解
- CSS ID 选择器详解
- CSS 属性选择器详解
- CSS 后代选择器
- CSS 子元素选择器
- CSS 相邻兄弟选择器
- CSS 伪类
- CSS 伪元素

## CSS 高级

- CSS 对齐
- CSS 尺寸
- CSS 分类
- CSS 导航栏
- CSS 图片库
- CSS 图片透明
- CSS 媒介类型
- CSS 注意事项
- CSS 总结

## CSS 实例

- CSS 实例

## CSS 测验

- CSS 测验

## CSS 参考手册

- CSS 参考手册
- CSS 选择器
- CSS 听觉参考手册
- CSS 网络安全字体
- CSS 单位
- CSS 颜色
- CSS 颜色值
- CSS 颜色名
- CSS 颜色十六进制

## 建站手册

- 网站构建
- 万维网联盟 (W3C)
- 浏览器信息
- 网站品质
- 语义网
- 职业规划
- 网站主机

## 关于 W3School

## 帮助 W3School

## 广告刊例

# CSS 图像透明度

- CSS 图片库
- CSS 媒介类型

通过 CSS 创建透明图像是很容易的。

注释：CSS opacity 属性是 W3C CSS 推荐标准的一部分。

## 亲自试一试 - 实例

创建透明图像 - Hover 效果
  在本例中，当用户将鼠标指针移动到图片上时，会改变图片的透明度。
创建文本在背景图像上的透明框
  本例创建了一个包围文本的半透明框。

## 实例 1 - 创建透明图像

定义透明效果的 CSS3 属性是 opacity。

首先，我们将展示如何通过 CSS 来创建透明图像。

常规图像：

带有透明度的相同图像：

请看下面的 CSS：

    img
    {
    opacity:0.4;
    filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */
    }

IE9, Firefox, Chrome, Opera 和 Safari 使用属性 opacity 来设定透明度。opacity 属性能够设置的值从 0.0 到 1.0。值越小，越透明。

IE8 以及更早的版本使用滤镜 filter:alpha(opacity=x)。x 能够取的值从 0 到 100。值越小，越透明。

## 实例 2 - 图像透明度 - Hover 效果

请把鼠标指针移动到图像上：

CSS 是这样的：

    img
    {
    opacity:0.4;
    filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */
    }
    img:hover
    {
    opacity:1.0;
    filter:alpha(opacity=100); /* 针对 IE8 以及更早的版本 */
    }

第一个 CSS 代码块类似实例 1 中的代码。此外，我们已经设置了当鼠标指针位于图像上时的样式。在这个例子中，当指针移动到图像上时，我们希望图像是不透明的。

对应的 CSS 是：opacity=1。

IE8 以及更早的浏览器：filter:alpha(opacity=100)。

当鼠标指针移出图像后，图像会再次透明。

## 实例 3 - 透明框中的文本

This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box.

源代码是这样的：

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    div.background
    {
      width: 400px;
      height: 266px;
      background: url('/i/tulip_peach_blossom_w.jpg') no-repeat;
      border: 1px solid black;
    }

    div.transbox
    {
      width: 338px;
      height: 204px;
      margin:30px;
      background-color: #ffffff;
      border: 1px solid black;
      /* for IE */
      filter:alpha(opacity=60);
      /* CSS3 standard */
      opacity:0.6;
    }

    div.transbox p
    {
      margin: 30px 40px;
    }
    </style>
    </head>

    <body>

    <div class="background">
    <div class="transbox">
    <p>
    This is some text that is placed in the transparent box.
    This is some text that is placed in the transparent box.
    This is some text that is placed in the transparent box.
    This is some text that is placed in the transparent box.
    This is some text that is placed in the transparent box.
    </p>
    </div>
    </div>

    </body>
    </html>

首先，我们创建一个 div 元素 (class="background")，它有固定的高度和宽度、背景图像，以及边框。然后我们在第一个 div 内创建稍小的 div (class="transbox")。"transbox" div 有固定的宽度、背景色和边框 - 并且它是透明的。在透明 div 内部，我们在 p 元素中加入了一些文本。

- CSS 图片库
- CSS 媒介类型

## 相关页面

CSS 参考手册：CSS3 opacity 属性