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样式