html - 如何在图片下方放置文字
问题描述
我试图使文本出现在缩放图像下方,但它们继续出现在后面,并且图像似乎占用了帖子正文中的所有空间。
当我尝试使用<p></p>
时,文本位于文本正文之外。
我使用 Blogger 博客,我刚刚从 Krz Szzz codepen 复制了代码:https ://codepen.io/ccrch/pen/yyaraz 。
HTML
<div class="tiles">
<div class="tile" data-scale="1.1" data-image="http://ultraimg.com/images/0yS4A9e.jpg"></div>
<div class="tile" data-scale="1.6" data-image="http://ultraimg.com/images/hzQ2IGW.jpg"></div>
<div class="tile" data-scale="2.4" data-image="http://ultraimg.com/images/bNeWGWB.jpg"></div>
</div>
CSS
@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:700);
body {
background: #fff;
color: #000;
margin: 0;
}
.tiles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.tile {
position: relative;
float: left;
width: 33.333%;
height: 100%;
overflow: hidden;
}
.photo {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
transition: transform .5s ease-out;
}
.txt {
position: absolute;
z-index: 2;
right: 0;
bottom: 10%;
left: 0;
font-family: 'Roboto Slab', serif;
font-size: 9px;
line-height: 12px;
text-align: center;
cursor: default;
}
.x {
font-size: 32px;
line-height: 32px;
}
解决方案
请查看完整视图
$('.tile')
// tile mouse actions
.on('mouseover', function(){
$(this).find('.photoin').css({'transform': 'scale('+ $(this).attr('data-scale') +')'});
})
.on('mouseout', function(){
$(this).find('.photoin').css({'transform': 'scale(1)'});
})
.on('mousemove', function(e){
$(this).find('.photoin').css({'transform-origin': ((e.pageX - $(this).offset().left) / $(this).width()) * 100 + '% ' + ((e.pageY - $(this).offset().top) / $(this).height()) * 100 +'%'});
})
// tiles set up
.each(function(){
$(this)
// add a photo container
.append('<div class="photo"><div class="photoin"></div></div>')
// some text just to show zoom level on current item in this example
.append('<div class="txt"><div class="x">'+ $(this).attr('data-scale') +'x</div>ZOOM ON<br>HOVER</div>')
// set up a background image for each tile based on data-image attribute
.find('.photoin').css({'background-image': 'url('+ $(this).attr('data-image') +')'});
})
body { margin:0; padding:0;}
body {
background: #fff;
color: #000;
margin: 0;
}
.tiles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.tile {
position: relative;
float: left;
width: 33.333%;
height: 100%;
overflow: hidden;
}
.photoin { position:absolute; left: 0; right: 0; bottom: 0; top: 0; background-repeat: no-repeat;
background-position: center;
background-size: cover; transition: transform .5s ease-out;}
.photo {
position: absolute;
top: 0;
left: 0;
width: 100%;
bottom:150px; overflow: hidden;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
transition: transform .5s ease-out;
}
.txt {
position: absolute;
z-index: 2;
right: 0;
bottom: 50px;
left: 0;
font-family: 'Roboto Slab', serif;
font-size: 9px;
line-height: 12px;
text-align: center;
cursor: default;
}
.x {
font-size: 32px;
line-height: 32px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div class="tiles">
<div class="tile" data-scale="1.1" data-image="http://ultraimg.com/images/0yS4A9e.jpg"></div>
<div class="tile" data-scale="1.6" data-image="http://ultraimg.com/images/hzQ2IGW.jpg"></div>
<div class="tile" data-scale="2.4" data-image="http://ultraimg.com/images/bNeWGWB.jpg"></div>
</div>
请查看完整视图
推荐阅读
- java - 如何查看向下转换在 Java 中是否合法?
- html - html 元标记未在框架集的父级中继承
- jxbrowser - JxBrowser:如何在 ContextMenuHandler 中实现“链接另存为”
- python - Mac 上的 Visual Studio Code 上的缩进错误(再次)
- python-dateutil - 规则日期偏移一周
- c# - 在 uwp webview 中运行统一 webgl 应用程序的问题
- python - Python。如何从字典中调用函数?
- c++ - 多阵列动态内存分配错误
- html - Angular 5 在不渲染的情况下生成 HTML
- rxjs - 调用 n 次相同的 observable