这是小提琴.我想要做的是将FontAwesome播放按钮绝对定位在图像顶部和中心.想知道是否有人曾经尝试过这个或有任何见解,试图以我能想到的方式做到这一点.
注意,我无法访问我正在处理的页面上的标记,必须是纯CSS.
.test {
height: 500px;
width: 100%;
}
.test:before {
content: "\f144";
font-family: FontAwesome;
font-size: 80px;
left: 50%;
position: absolute;
top: 50%;
}
img {
width: 100%;
}Run Code Online (Sandbox Code Playgroud)
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="test">
<img src="http://placehold.it/350x150">
<h2>Lorem ipsum dolor sit amet</h2>
<div class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis dicta quae a illo nulla, temporibus in nostrum id quia totam sint veritatis aspernatur vitae, similique labore non voluptate, dolores magnam. …Run Code Online (Sandbox Code Playgroud)