上一节:
下一节:

  CSS 透明

  • CSS不透明度/透明度

    opacity属性指定元素的不透明度/透明度。

    opacity属性可以取0.0 - 1.0的值。值越低，越透明：

    有五种不同的值：

    img {
                          opacity: 0.5;
                          filter: alpha(opacity=50); /* For IE8 and earlier */
                        }
    尝试一下

    注意： IE8及早期使用filter:alpha(opacity=x)。x可以取0到100之间的值。较低的值使元素更透明。

  • 透明的悬停效果

    opacity属性通常与:hover选择器一起使用以更改鼠标悬停时的不透明度：

    img {
                          opacity: 0.5;
                          filter: alpha(opacity=50); /* For IE8 and earlier */
                        }

                        img:hover {
                          opacity: 1.0;
                          filter: alpha(opacity=100); /* For IE8 and earlier */
                        }
    尝试一下

    示例解释:

    第一个CSS块类似于示例1中的代码。此外，我们添加了当用户将鼠标悬停在其中一个图像上时应该发生的事情。在这种情况下，我们希望图像在用户悬停在图像上时不透明。这个的CSS是opacity:1;。当鼠标指针离开图像时，图像将再次透明。反转悬停效果的一个例子：

    img:hover {
                          opacity: 0.5;
                          filter: alpha(opacity=50); /* For IE8 and earlier */
                        }
    尝试一下

  • 透明盒子

    使用opacity属性为元素的背景添加透明度时，其所有子元素都继承相同的透明度。这可以使完全透明元素内的文本难以阅读：

    div {
                          background-color: #4CAF50;
                          padding: 10px;
                        }

                        div.first {
                          opacity: 0.1;
                          filter: alpha(opacity=10); /* For IE8 and earlier */
                        }

                        div.second {
                          opacity: 0.3;
                          filter: alpha(opacity=30); /* For IE8 and earlier */
                        }

                        div.third {
                          opacity: 0.6;
                          filter: alpha(opacity=60); /* For IE8 and earlier */
                        }
    尝试一下

  • 使用RGBA的透明度

    如果您不想对子元素应用不透明度，例如上面的示例，请使用RGBA颜色值。以下示例设置背景颜色的不透明度，而不是文本：

    div {
                          background: rgb(76, 175, 80);
                          padding: 10px;
                        }

                        div.first {
                          background: rgba(76, 175, 80, 0.1);
                        }

                        div.second {
                          background: rgba(76, 175, 80, 0.3);
                        }

                        div.third {
                          background: rgba(76, 175, 80, 0.6);
                        }
    尝试一下

    您从我们的CSS颜色章节中了解到，您可以使用RGB作为颜色值。除了RGB之外，您还可以使用带有Alpha通道（RGBA）的RGB颜色值 - 它指定颜色的不透明度。RGBA颜色值指定为：rgba（红色，绿色，蓝色，alpha）。的 alpha参数之间是0.0（完全透明）和1.0（完全不透明）的数。
    提示：您将在CSS颜色章节中了解有关RGBA颜色的更多信息。

  • 透明框中的文本

    div.background {
                          background: url(klematis.jpg) repeat;
                          border: 2px solid black;
                        }

                        div.transbox {
                          margin: 30px;
                          background-color: #ffffff;
                          border: 1px solid black;
                          opacity: 0.6;
                          filter: alpha(opacity=60); /* For IE8 and earlier */
                        }

                        div.transbox p {
                          margin: 5%;
                          font-weight: bold;
                          color: #000000;
                        }
    尝试一下

    首先，我们创建一个带有背景图像和边框的<div>元素（class=“background”）。然后我们在第一个<div>中创建另一个<div>（class=“transbox”）。<div class=“transbox”>具有背景颜色和边框 - div是透明的。在透明的<div>中，我们在<p>元素中添加了一些文本。

  • 相关页面

    HTML教程：HTML样式

上一节:
下一节: