个人中心
文章发布
退出
作者热门文章
- 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
我是 os 2 的新手，所以真的不知道从哪里开始。是否可以编写一个 WatchOs 2 应用程序，它将在后台运行并每小时唤醒一次？网上没有那么多可用的信息，但到目前为止我所看到的表明不可能编写后台应用
如何将 url 背景图像添加到渐变中并具体定位？因为梯度本身被当作图像 CSS background: linear-gradient(to bottom, #98cb01 2%,#60a822 10
我是 android 开发的新手，正在开发我的第一个 android 应用程序。我在布局的 xml 中设置了 View 的背景颜色，如下所示。 android:background="@+color/
为了尽可能简洁地使用样式，如果使用双像素密度设备(例如 iPhone 4)查看我的页面，我宁愿不使用包含的媒体查询样式表。 话虽如此，如果我只是做这样的事情就可以了吗？ .icon-1 { bac
我有一个由 62 张 91 * 91 像素的图像组成的 Sprite ，这使得整个图像为 91 * 5642 像素。它们以动态网格的形式显示，该网格会根据用户/指针的移动而增长和缩小。有时，一个元素(
我一直在尝试制作一款使用 Xbox One Kinect (V2) 的 Unity 游戏。 我遵循了本教程中的说明: http://www.imaginativeuniversal.com/blog/
看来firefox会自动组合一些东西，例如它需要单独的css值，例如“border-color”，“border-width”并将它们全部转储到“border”中..这使jquery变得很痛苦因为 .
我正在构建我的第一个 Chrome 扩展程序。我浏览了 Chrome 开发人员文档，但我无法理解几个主题。 我的理解: 有两个 Action : 浏览器操作(地址栏外的按钮) 页面操作(地址栏内的按钮
我的后台监听器是 chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) 在chrome.conte
哪个更有效: 我正在尝试找出哪种提供半透明背景的方法更有效/更快: background-color: rgba(255, 255, 255, .12); 或者 background-image: u
我想要一个有 tr 作为黑色背景的表格，里面有一个白色背景的表格。
我在我的主页上放了一个背景。它可以在除 android chrome 之外的所有浏览器上正确显示。这是我的 CSS: body.path-frontpage { background-imag
我正在尝试对我的背景图像应用滤镜，但是我遇到了 CSS 属性 URL 和线性渐变的问题。我想要的背景图片 .bg-image-full { background: no-repeat center
在样式部分的 chrome 中使用谷歌开发者控制台时，它会立即为我提供“在我键入时”的背景颜色属性。几个月前，它一直在提供我更喜欢的一般属性(property)“背景”。 是否有机会自定义这些提示，或
我正在尝试实现 faux column网站上的布局。简而言之，它涉及在包含两个垂直列的 div 上平铺背景图像，使其看起来像两个列一直延伸到底部。 我的专栏如下所示: XXXX MMMM XXXX
这是一个 example .我想裁剪背景图像，然后将裁剪图像用作更大(尺寸)元素的背景。我的意思是 div 比它的背景大，我不需要重复。现在，当 background-repeat 取消注释时，元素消
CSS3 声明 background-clip 和 background-origin 似乎对背景有相同的效果。它们似乎都将背景限制在相对于 HTML 元素的某个区域，所以我想知道这两个声明在功能上是
我正在为图片库制作缩略图页面。缩略图预览作为 完成 float 具有固定的方形尺寸。 然而，缩略图本身不一定是正方形或相同大小，它们具有它们所代表的大图像的属性。 为了让它看起来不错，我想在正方形中
这个问题在这里已经有了答案: Get a CSS value with JavaScript (8 个答案) 关闭 6 年前。
你好， 就像我在标题中所说的 background-image:none; 不起作用，因为使用 css3 background-image:url('...'); 返回一个新层每次文件都是新的。我正在
我是一名优秀的程序员,十分优秀！