css在图片上添加播放按钮

CSS能够让我们在图片上添加播放按钮，让网站更加生动。下面是一个示例代码：

/*设置图片位置*/.play-button-container {
    position: relative;
}
/*设置播放按钮*/.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
/*设置播放按钮图标*/.play-button:before {
    content: "f04b";
    font-family: "FontAwesome";
    font-size: 24px;
    color: #fff;
}
/*当鼠标悬停在播放按钮上时*/.play-button:hover {
    background-color: rgba(0, 0, 0, 0.7);
}
/*当鼠标点击播放按钮时*/.play-button:active {
    background-color: rgba(0, 0, 0, 0.9);
}
    

首先，我们为图片容器设置相对定位，这样我们就可以使用绝对定位来放置播放按钮。

接着，我们设置播放按钮的样式。我们将它放在图片的中心（使用transform来设置水平和垂直居中），给它一个圆形的背景色，还使用FontAwesome图标作为播放按钮图标。

我们还增加了鼠标悬停和点击播放按钮时的样式。这样，用户可以更好地了解他们正在与网站互动。

使用这些CSS代码，我们可以轻松地在图片上添加一个漂亮的播放按钮，使网站更加生动、互动。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！