Question

这是fiddle。我想要做的是将FontAwesome播放按钮绝对定位在图像顶部和中心。想知道是否有人曾经尝试过这个或有任何见解，试图按照我能想到的每一种方式去做。

注意，我无法访问我正在处理的页面上的标记，必须是纯CSS。

＆＃13;

.test {
  height: 500px;
  width: 100%;
}

.test:before {
  content: "\f144";
  font-family: FontAwesome;
  font-size: 80px;
  left: 50%;
  position: absolute;
  top: 50%;
}

img {
  width: 100%;
}

＆＃13;

<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>

＆＃13;

Answer 1

使用给定的标记，如果您事先知道图像比例，则可以这样做，使用它来计算视口宽度vw，并结合transform: translate。

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

Fiddle demo

.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>

Answer 2

试试这个！

<div class="test">
<div class="image">
<img src="http://placehold.it/350x150">
<div class="play"></div>
</div>

<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>

CSS：

.test {
  height: 500px;
  width: 100%;
}
.image{
  position:relative;
}
.play::after {
    content: "\f144";
    font-family: FontAwesome;
    font-size: 80px;
    left: 50%;
    position:absolute;
    top:50%;
    transform:translate(-50%,-50%);
}

img{
  width: 100%;
}

Answer 3

你需要使用Javascript，这是一个通过jQuery的例子：

插入包装并将其设置为与横幅图像相同的高度。
将fa play图标添加到该包装器中。
将它们放入jQuery resize()函数中以使其响应。
使用CSS flexbox或任何其他方法将图标置于包装器中心。

<强> jsFiddle

$(document).ready(function() {
  $(window).trigger('resize');
});

$(window).on('resize', function() {
  if (!$('.wrap').length) {
    $('<div class="wrap"><i class="fa fa-play-circle" aria-hidden="true"></i></div>').prependTo('.test');
  }
  $('.wrap').css('height', $('.test img').height());
});

.test {
  position: relative;
}

.wrap {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  font-size: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}

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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<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>

中心绝对定位伪元素

3 个答案: