我正在尝试将 font-awesome
图标置于 bootstrap 3
中的图像之上。
以下是 div 中包含的图像代码:
<div id="quickVideo">
<a data-fancybox href="https://player.vimeo.com/video/153113362?autoplay=1&color=54b3e4" class="adminDemoVideo">
<img src="~/Images/..." class="img-responsive">
</a>
</div>
我可以在 div 元素上使用 ::before
来做到这一点,但这里的问题是它默认情况下不响应。
.adminDemoVideo::before {
font-family: 'FontAwesome';
content: '\f04b';
margin-top: 1.35em;
margin-left: 2.8em;
color: white;
z-index: 1000;
font-size: 50px !important;
position: absolute;
padding-bottom: 3px;
padding-top: 3px;
padding-left: 25px;
padding-right: 15px;
background-color: rgba(23, 35, 34, 0.75);
border-radius: 5px 5px 5px 5px;
}
这是桌面显示尺寸的样子:
当我将其转换为手机或平板电脑 View 大小时,它会由于边距等而扭曲,如下所示:
有什么方法可以在不知道屏幕尺寸的情况下修复它吗?
如果解决方案是在 css
或 javascript
或 jquery
中,对我来说并不重要。
希望这不是重复的,但在这里没有找到任何合适的解决方案......
提前致谢。
最佳答案
这是一个常见的叠加问题。典型的答案是使用绝对定位并在相对定位的父级内部进行翻译。
- 确保父级具有
position:relative;
,这样绝对定位的覆盖元素就不会出现在您不想要的位置。我们通过这样做来包含覆盖层。 - 将
position:absolute;
应用于叠加元素。将50%
应用于left
和top
。这将使覆盖元素的左上角到达父元素的中心。 - 使用
transform:translate( -50%, -50% );
将叠加层向上并向左移动其宽度和高度的 50%。现在叠加层的中心位于父级的中心。
@import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );
@import url( 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' );
.adminDemoVideo {
position: relative;
display: inline-block;
}
.adminDemoVideo::before {
content: '\f04b';
z-index: 5;
position: absolute;
left: 50%;
top: 50%;
transform: translate( -50%, -50% );
padding: 3px 15px 3px 25px;
color: white;
font-family: 'FontAwesome';
font-size: 50px !important;
background-color: rgba(23, 35, 34, 0.75);
border-radius: 5px 5px 5px 5px;
}
<a href="https://player.vimeo.com/video/153113362?autoplay=1&color=54b3e4" class="adminDemoVideo">
<img src="http://placehold.it/1200x800/fc0" class="img-responsive">
</a>
请注意, anchor 包裹的图像将创建少量空白,为文本中的下行部分留出空间,因此从技术上讲,它不会 100% 垂直居中。如果这是一个问题,您可以通过将图像设置为 display: block;
来解决此问题。
关于javascript - 如何在 Bootstrap 3 中将 font Awesome 图标置于图像之上?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43353239/