网站制作教程:CSS 图层

你的网络首码项目网 网站建设来源:你的网络首码项目网评论76字数 752阅读模式

您可以使用CSS添加元素的“层”,以便元素可以位于其他元素的前面或后面。

在CSS中,图层是指将z-index属性应用于彼此重叠的元素。文章源自你的网络首码项目网-https://www.youranweb.com/260.html

z-index属性与position属性结合使用时,可以指定在发生重叠时哪个元素应显示在顶部。使用position属性时很容易发生重叠,这在创建高级布局时通常是可取的。文章源自你的网络首码项目网-https://www.youranweb.com/260.html

示例代码:文章源自你的网络首码项目网-https://www.youranweb.com/260.html

<!DOCTYPE html>
<title>Example</title>
<style>
  div {
    width: 80px;
    height: 100px;
    position: relative;
  }
  .infront {
    background-color: red;
    top: 10px;
    left: 80px;
    z-index: 2;
  }
  .behind {
    background-color: gold;
    top: -60px;
    left: 35px;
    z-index: 1;
  }
</style>


<div class="infront"></div>
<div class="behind"></div>

具有不透明度的图层

可以使用opacity属性在图层之间提供一定的透明度。文章源自你的网络首码项目网-https://www.youranweb.com/260.html

下面是一个示例。文章源自你的网络首码项目网-https://www.youranweb.com/260.html

<!DOCTYPE html>
<title>Example</title>
<style>
  div {
    width: 80px;
    height: 100px;
    position: relative;
  }
  .infront {
    background-color: red;
    top: 10px;
    left: 80px;
    z-index: 2;
    opacity: 0.3;
  }
  .behind {
    background-color: gold;
    top: -60px;
    left: 35px;
    z-index: 1;
  }
</style>


<div class="infront"></div>
<div class="behind"></div>
文章源自你的网络首码项目网-https://www.youranweb.com/260.html文章源自你的网络首码项目网-https://www.youranweb.com/260.html
相关文章
weinxin
你的网络首码项目网站长
本站旨在为广大网友提供一个免费、公开且和谐的互联网项目交流平台,所有文章均来自网络和网友投稿,不代表本站任何立场,请勿盲目下载注册参与,以免为您带来不必要的损失。
你的网络首码项目网

发表评论