个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
28
4
我有一个带有 layout="responsive"的 amp-img，我需要在其中或上面放置一些文本，如果您喜欢这样说的话。 amp-img 将填充屏幕的宽度，高度将由 amp-img 确定，以便整个图像可见并保持纵横比。
有办法吗？
我可以将图片放在背景中，但我会失去 amp-img 提供的响应式大小调整。我尝试过使用背景大小为 cover 或 contain 的方法进行此操作，但图像总是在右侧或底部被裁剪。
我也试过用 position:absolute 放置文本，但无法将文本置于图像之上。这是一种尝试，它以图像下方的文本结尾:
<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>
有没有办法让图片大小正确并在上面放置文本？
附言。有人会为 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>关于background-image - 将文本放在布局为 ="responsive"的 amp-img 中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54466477/
28
4
0
我有一个包含以下内容的简单服务: import { Injectable } from '@angular/core'; import { Http, Response } from '@angula
在我的 Angular-12 应用程序中，我在服务中有以下代码: constructor(private http: HttpClient, private router: Router) {
我是android领域的新手，我想从响应json数组访问每个结果元素，但我无法做到这一点，我试图获取每个元素，但我只得到一个值“rohit1”是第一个元素。请帮助我。 我是 rohit parmar，
我正在用 java 编写 RESTful 服务，但是当我尝试使用 Resource 类时，显示以下错误:类型 Response.Response 构建器不可见。我不明白问题可能是什么，因为我已经导入了
在 Spring 应用程序中，我正在调用第三方服务，我正在发送 XML 请求并获取 XML 响应，当无法将该响应解析为 Java 对象时，我正确地获得了 XML 响应，我收到以下错误: org.spr
我正在发布一个页面 URL 例如 mysite.com/disclaimer/someinfo 此页面显示协议(protocol)，如果用户单击同意按钮，则 PDF 文件将作为附件流式传输。 这样做的
我是 Camel 的新手。我一直在尝试将数据(文件中的 Json)提交到网络服务。这是我的代码: public static void main(String args[]) throws E
我有一个 HTTP 执行器类: Future future = service.apply(request).toJavaFuture(); 现在我想删除 ? extends其中的一部分，因为我不想让
我想将我所有的 http header 响应设置为这样的: response.headers["X-Frame-Options"] = "SAMEORIGIN" 我检查了this question ，
我们有两个 channel ，分别是 channelA 和 channelB。 在 channel A中我们有两个目的地 一个。第一个目的地将使用 XML 数据作为输入调用 channelB，并从 c
以下有什么区别 response.status(200).send('Hello World!'); 和这个 response.writeHead(200, {'content-type':'appl
我试图让Foundation在iPhone的浏览器上响应。我已经在手机上尝试过Safari和Chrome，它们都显示了 table 面布局。 但是，在 table 面上，如果缩小浏览器窗口，则会看到布
您好，当我在云代码中运行此作业时，我收到一条错误日志:Failed with: success/error was not called. 定义功能运行良好，但在作业日志中我有此错误日志。请协助我解决
我正在使用ozeki ng短信网关。我无法将任何短信发送到任何手机。请帮助我通过网络发送短信到手机 从客户端检测到一个潜在危险的Request.Form值(textboxError =“。设置此值之后
今天我在 WordPress 中遇到了问题。当我尝试创建一个新页面并在 WordPress 管理部分上传新图像时，我尝试找出解决方案，但我没有得到它......所以经过一个小时的打磨后我得到了一个解决
我过去常常通过刷新和结束来结束对客户端的传输，如下面的代码所示。 Response.Flush(); Response.End(); 但是，Response.End() 将缓冲内容刷新到客户端让我印象
我正在编写一个在单击按钮时显示对话框窗口的函数:这里是与状态和 statusCode 相关的代码段。 if(response.status>300){
从资源清理的角度，为什么会有Response.Close()和Response.Dispose()，哪个更全面(调用另一个)？ 最佳答案 在提供这两种方法的情况下，Dispose 的实现应该调用 Cl
在我注意到我的代码可能在以经典模式设置的服务器上运行之前，我一直在使用 Response.Header.Add()。在这种情况下，异常“此操作需要 IIS 集成管道模式”。被提出。 我切换到 Resp
Response.End() 生成 ThreadAbortException。 使用 HttpContext.Current.ApplicationInstance.CompleteRequest 代
我是一名优秀的程序员,十分优秀！