卡卡網(wǎng)

在圖片上疊加其他圖標，這種設計非常常見，今天將介紹如何通過CSS來實現(xiàn)這種設計。

在本文中，我們構建一個視頻播放器頁面來了解圖標的覆蓋在 CSS 中是如何工作的。

demodownload

在本示例中，頁面有一個圖像，播放按鈕放置在圖像的中心，心形按鈕放置在圖像的右上角。

HTML

<div href="#" class="like-button" title="喜歡">
  <i class="fa fa-heart fa-1x"></i>
</div>

<img src="preview-0.jpg" class="image">

<div class="overlay">
  <button href="#" class="play-icon" title="播放">
    <i class="fa fa-play"></i>
  </button>
</div>

第一個<div></div>是一個心形按鈕。接著一個<img>是預覽圖片。最后一個<div></div>是一個播放按鈕。

我們要做的工作是把心形按鈕和播放按鈕放置在預覽圖片上，其中心形按鈕放在右上角，播放按鈕放在中心。這些工作，均是用CSS來完成。

CSS

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.image {
    width: 100%;
    height: auto;
}

.overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0.3;
    transition: .3s ease;
    background-color: transparent;
}

.container {
    position: relative;
    width: 100%;
    max-width: 400px;
}

.overlay:hover {
    opacity: 0.7;
}

.play-icon {
    color: black;
    font-size: 2rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    cursor: pointer;
    width: 20%;
    z-index: 2;
}

.like-button {
    position: absolute;
    z-index: 2;
    color: whitesmoke;
    font-size: 20px;
    text-align: right;
    cursor: pointer;
    border-radius: 10rem;
    background-color: transparent;
    border: transparent;
    width: 99%;
    padding-top: 4px;
    padding-right: 4px;
}

.like-button :hover {
    color: red;
}

.fa-play {
            /* z-index: 2; */;
}

CSS是如何完成工作的？

1、疊加覆蓋

這里面有個關鍵的屬性：z-index。

我們看到HTML第一個<div></div>里的class：like-button，這個類里有個z-index屬性，其屬性值為2。

此外，HTML第二個<div></div>里的button標簽里的class：play-icon，這個類里也有個z-index屬性，其屬性值為2。

z-index屬性值可設置div層結構的上下位置，值大的div在值小的div之上。z-index默然值是0。

因此，我們可看到兩個圖標位于圖片的上面。

我們還經(jīng)?？吹絲-index的其他值，如-1，0，99等，可以通過下文了解z-index的更多巧妙用法。

• 詳解css z-index的值使用區(qū)別:-1,0,1,auto,999
• 如何讓某一DIV層顯示在上面？z-index解決問題

2、位置定位

位置定位用的屬性是：position。

我們看到心形按鈕的class .like-button、播放按鈕div的class：overlay、播放按鈕圖標的class .play-icon的定位屬性都是position: absolute;、這是表示絕對位置。

position的屬性值還有一個relative，這是表示相對位置。

3、鼠標效果

當用戶將鼠標懸停在圖標上時，我們添加了一些過渡效果，使頁面看起來更漂亮。

總結

本文介紹了如何使用CSS在圖像頂部疊加圖標，用到的關鍵CSS屬性是z-index和position，弄明白這兩個CSS的用法，我們就可以輕松的實現(xiàn)圖標和圖片疊加的效果設計。

注意！本實例用到Font Awesome圖標，你的Web服務器可能要安裝配置Font Awesome圖標字體，請看以下文章。

Linux Nginx安裝配置Font Awesome圖標字體

IIS7.5安裝配置Font Awesome圖標字體的方法

標簽: css  z-index  疊加圖標  overlay