技術(shù)頻道導(dǎo)航
HTML/CSS
.NET技術(shù)
IIS技術(shù)
PHP技術(shù)
Js/JQuery
Photoshop
Fireworks
服務(wù)器技術(shù)
操作系統(tǒng)
網(wǎng)站運(yùn)營

贊助商

分類目錄

贊助商

最新文章

搜索

如何使用CSS在圖像頂部疊加圖標(biāo)

作者:admin    時間:2022-8-1 10:58:11    瀏覽:

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

在本文中,我們構(gòu)建一個視頻播放器頁面來了解圖標(biāo)的覆蓋在 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>是預(yù)覽圖片。最后一個<div></div>是一個播放按鈕。

我們要做的工作是把心形按鈕和播放按鈕放置在預(yù)覽圖片上,其中心形按鈕放在右上角,播放按鈕放在中心。這些工作,均是用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、疊加覆蓋

這里面有個關(guān)鍵的屬性:z-index。

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

此外,HTML第二個<div></div>里的button標(biāo)簽里的classplay-icon,這個類里也有個z-index屬性,其屬性值為2。

z-index屬性值可設(shè)置div層結(jié)構(gòu)的上下位置,值大的div在值小的div之上。z-index默然值是0

因此,我們可看到兩個圖標(biāo)位于圖片的上面。

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

2、位置定位

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

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

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

3、鼠標(biāo)效果

當(dāng)用戶將鼠標(biāo)懸停在圖標(biāo)上時,我們添加了一些過渡效果,使頁面看起來更漂亮。

總結(jié)

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

注意!本實(shí)例用到Font Awesome圖標(biāo),你的Web服務(wù)器可能要安裝配置Font Awesome圖標(biāo)字體,請看以下文章。

Linux Nginx安裝配置Font Awesome圖標(biāo)字體

IIS7.5安裝配置Font Awesome圖標(biāo)字體的方法

標(biāo)簽: css  z-index  疊加圖標(biāo)  overlay  
x
  • 站長推薦
/* 左側(cè)顯示文章內(nèi)容目錄 */