技术频道导航
HTML/CSS
.NET技术
IIS技术
PHP技术
Js/JQuery
Photoshop
Fireworks
服务器技术
操作系统
网站运营

赞助商

分类目录

赞助商

最新文章

搜索

如何使用CSS在图像顶部叠加图标

作者:admin    时间:2022-8-1 10:58:11    浏览:

在图片上叠加其他图标,这种设计非常常见,今天将介绍如何通过CSS来实现这种设计。

在本文中,我们构建一个视频播放器页面来了解图标的覆盖在 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>里的classlike-button,这个类里有个z-index属性,其属性值为2

此外,HTML第二个<div></div>里的button标签里的classplay-icon,这个类里也有个z-index属性,其属性值为2

z-index属性值可设置div层结构的上下位置,值大的div在值小的div之上。z-index默然值是0

因此,我们可看到两个图标位于图片的上面。

我们还经常看到z-index的其他值,如-1,0,99等,可以通过下文了解z-index的更多巧妙用法。

2、位置定位

位置定位用的属性是:position

我们看到心形按钮的class .like-button、播放按钮divclassoverlay、播放按钮图标的class .play-icon的定位属性都是position: absolute;、这是表示绝对位置。

position的属性值还有一个relative,这是表示相对位置。

3、鼠标效果

当用户将鼠标悬停在图标上时,我们添加了一些过渡效果,使页面看起来更漂亮。

总结

本文介绍了如何使用CSS在图像顶部叠加图标,用到的关键CSS属性是z-indexposition,弄明白这两个CSS的用法,我们就可以轻松的实现图标和图片叠加的效果设计。

注意!本实例用到Font Awesome图标,你的Web服务器可能要安装配置Font Awesome图标字体,请看以下文章。

Linux Nginx安装配置Font Awesome图标字体

IIS7.5安装配置Font Awesome图标字体的方法

标签: css  z-index  叠加图标  overlay  
x
x
  • 站长推荐