html - 在使用 css 调整大小时使元素以图像为中心
解决方案
.imageWrapper {
height:200px;
width:200px;
position:relative;
margin:50px auto 0px auto;
}
.imageWrapper > div:first-child {
position:absolute;
z-index:1;
top:0px;
left:0px;
right:0px;
bottom:0px;
overflow:hidden;
}
.imageWrapper > div:first-child img{
height:200px;
width:100%;
object-fit:cover;
position:relative
}
.imageWrapper > div:last-child {
position:relative;
z-index:2;
text-align:center;
line-height:200px;
height:200px;
width:100%;
}
<div class="imageWrapper">
<div><img src="https://upload.wikimedia.org/wikipedia/commons/e/ee/Billede_084.jpg"></div>
<div><p>bla bla</p></div>
</div>
制作一个包装div,使图像绝对作为背景并将文本放在图像前面。
推荐阅读
- java - Java - 到 localhost 的 HttpURLConnection 与使用 postman-echo.com 的工作方式不同
- r - 从多个混淆矩阵中提取指标并填充数据框
- reactjs - 没有 Websocket 的 AWS AppSync 订阅
- vhdl - 需要解决 VHDL 常量中“三元运算符”的问题
- wso2 - Apim Analytics 不允许我同时启动 'worker' 和 'dashboard' 节点
- java - SQLite 表中的硬编码数据未正确显示(数字格式问题 - 双精度)
- c++ - 霍夫线变换 - 如何闭合线以形成多边形?
- amazon-web-services - ec2 实例 url 显示文件而不是运行 App
- drools - 对属性和包含对象执行 Drools 规则的顺序
- c# - 如何遍历字典的哈希集