在CSS3中，我们可以使用opacity属性来定义元素的透明度。

语法：

opacity:数值;

说明：

opacity属性取值是一个数值，取值范围为0.0~1.0。其中0.0表示完全透明，1.0表示完全不透明。

举例：

在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        a
        {
            display:inline-block;
            padding:5px 10px;
            font-family:微软雅黑;
            color:white;
            background-color:hotpink;
            cursor:pointer;
        }
        a:hover
        {
            opacity:0.6;
        }
    </style>
</head>
<body>
    <a>调试代码</a>
</body>
</html>

默认情况下，预览效果如下图所示。

当鼠标移到超链接上方，此时预览效果如下图所示。

分析：

注意，opacity属性不仅作用于元素的背景颜色，还会作用于内部所有子元素以及文本内容。

opacity属性在实际开发用得也比较多，大多数时候都是配合:hover来定义鼠标移动到某个按钮或图片上时，改变透明度来呈现动态的效果。