绝对定位加相对定位实现的视频播放封面

1年前更新

160

首先分析一下，三个部分组成，一个大盒子里面一个封面图和一个背景效果。

那么先把盒子里面内容写好。

<div class="box">
        <div class="bf"></div>
        <img src="bj.jpg" alt="背景">
    </div>

接着通过css设置盒子大小，因为需要两个元素在一起，所以我们需要用到绝对定位做背景效果，那么更具子相父绝这个口诀，我们应该吧这个两个被包裹起来的两个的父级元素box加上相对定位。
```
.box {
            width: 190px;
            height: 120px;
            margin: 0 auto;
            position: relative;
        }
```

然后让图片大小和盒子大小始终保持一致。

img {
            width: 100%;
            height: 100%;
        }

接着吧播放背景设置一下，然后在用个绝对定位使这个背景覆盖在图片上面。

.bf {
            display: none;
            width: 190px;
            height: 120px;
            position: absolute;
            background-color: rgba(151, 151, 151, 0.5);
            background-image: url("bf.png");
            background-size: 40px;
            background-repeat: no-repeat;
            background-position: center;
        }

这里一定要记得加上display: none;这个是用来做隐藏元素的。