background-image - 将文本放置在带有 layout="responsive" 的 amp-img 中
问题描述
我有一个带有 layout="responsive" 的 amp-img,如果您喜欢这样说,我需要在其中或在其顶部放置一些文本。amp-img 将填充屏幕的宽度,高度将由 amp-img 确定,以便整个图像可见并保持纵横比。
有没有办法做到这一点?
我可以将图像放在背景中,但我会失去 amp-img 提供的响应式大小。我已经尝试过使用背景大小的封面或包含,但我的图像总是被裁剪,无论是在右侧还是底部。
我也尝试将文本放置在位置:绝对,但无法将文本放在图像顶部。这是一次尝试,最终得到图像下方的文本:
<div style="position:relative">
<amp-img src="/images/@Model.ImageUrl" layout="responsive" width="1920" height="1080" alt=""></amp-img> @* 16 x 9 *@
<div class="clearfix" style="padding-top:25%; padding-bottom:10%; position:absolute; z-index:1">
<div class="mx-auto md-col-9">
<h2 class="tx-g2 tx-center ml-1 mr-1 shadow mb-0" style="{text-transform:uppercase;}">
<amp-fit-text width="400" height="20" layout="responsive" max-font-size="75">
@Html.Raw(Model.Title)
</amp-fit-text>
</h2>
</div>
</div>
</div>
有没有办法让图像大小正确并在上面放置文字?
PS。有人会为 amp-fit-text 创建一个标签吗?
解决方案
您的 <div> 包含 <amp-fit-text> 缺少宽度。请参阅下面的更简单的示例。
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<title> Hello World</title>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-fit-text" src="https://cdn.ampproject.org/v0/amp-fit-text-0.1.js"></script>
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-custom>
</style>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
</head>
<body>
<div style="position: relative;">
<amp-img src="https://omoiwords.com/stories-poster.jpeg-2048.jpeg"
width="1228" height="819" layout="responsive"></amp-img>
<div style="background-color: rgba(0,0,0,0.7);
color: white; width: 80%; position:absolute; top:10%; left: 10%;">
<amp-fit-text
width="200" height="50" layout="responsive">
Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt.
Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt.
</amp-fit-text>
</div>
</div>
</body>
</html>
推荐阅读
- python - Alexa 技能立即超时
- javascript - 使用 jQuery 为单选选项隐藏和显示 div 可以变得更简单吗?
- html - 图片仅在 Gmail 而不是 Ymail 上中断
- javascript - 使用 jQuery 隐藏/显示元素
- java - 如何在 Spring Boot 中公开诸如可下载链接之类的资源
- uwp - ReactiveUI - 如何共享属性?
- ios - 如何确定是否启用了 ASAM?
- javascript - 给定特定输入时如何重定向到特定页面
- scala - 找不到参数解析器的隐式值:play.api.mvc.BodyParser[Any]
- bash - JMeter Beanshell 断言:如何保存 Runtime.getRuntime().exec("ifconfig | grep \"${IpAddress}\" | wc -l") 的值?