中心绝对定位伪元素

Question

这是小提琴.我想要做的是将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%;
}

<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.
  </div>
  <br>
  <a class="btn btn-default">Learn More >></a>
</div>

Answer 1

使用给定的标记,如果你知道前面的图像比例,你可以这样做,你用它来计算视口宽度vw,结合transform: translate.

在这种情况下,图像比率因子是150/350~0.428

小提琴演示

.test {
  height: 500px;
  width: 100%;
}

.test:before {
    content: "\f144";
    font-family: FontAwesome;
    font-size: 80px;
    left: 50%;
    position:absolute;
    top: calc(50vw * 0.428);              /* width * image ratio factor */
    transform: translate(-50%,-50%);
}

img{
  width: 100%;
}

 <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.
  </div>
  <br>
  <a class="btn btn-default">Learn More >></a>
</div>