如何将一个图像放在另一个图像之上？
勒克斯
我已经看到一些解释如何使用绝对位置做到这一点的方法。我目前正在建立Bootstrap 3网站，因此无法使用absolute属性。
以下是我所讨论内容的快速模型（请注意，播放按钮不会被烧入下面的图像中）
另外，如果您可以解释如何制作类似的渐变，那将是很好的。
我尝试使用z-index属性，但是使用它时，我不知道如何相对于具有较低z-indexes的元素定位元素。
Edit: The play-button (seen on top of the images) will not be a part of the jpg image asset. Rather, it will be its own svg asset put on top of the jpg (thumbnail) image. I choose this way so that I can animate the "play-button" independently.
Neither will the gradient, title, subtitle or "article-tag" be a part of the thumbnail image asset.
The red "divider's" will be its own svg asset as well.
Ideally, I would like to be able to place <img></img> objects on top of another <img></img> bounding box and be able to move it relative to the bounding box. eg x=50% y=50% for centering. The method should be scalable so that I can have more than two layers as well as having multiple objects on the same layer.
注意：缩略图将以1920x1080的分辨率存储在Web服务器上。当尝试使用“分隔线”作为背景图像时，我遇到了裁剪问题：
它不会扩大其父级<div>。（另外，是否有一种方法可以检测用户的屏幕尺寸并相应地（在服务器上）重新缩放图片以提高加载速度？例如cookie或其他东西？）
我很抱歉可能违反了网站上的大量规则，这是我的第一个问题。
奥龙·本·戴维（Oron Ben-David）
关于渐变，简短的CSS文字将是：
background: -webkit-linear-gradient(135deg, #a11633 45%, #7D1229 48%, #7D1229 20%);
另外：我为布局创建了一个JSFiddle：）
HTML：
<div class="relative-container">
<div class="absolute-container">
<div class="flex-1">
Img 1
</div>
<div class="flex-1">
Img 2
</div>
<div class="flex-1">
Img 3
</div>
</div>
</div>
CSS：
.relative-container{
width:300px;
height:200px;
background: -webkit-linear-gradient(135deg, #a11633 45%, #7D1229 48%, #7D1229 20%);
}
.absolute-container{
width:300px;
height:100px;
display:flex;
align-items: center;
position:absolute;
top:55px;
}
.flex-1{
flex:1;
border:1px dashed black;
text-align:center;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
编辑于
相关文章
TOP 榜单
- 1
Qt Creator Windows 10 - “使用 jom 而不是 nmake”不起作用
- 2
使用next.js时出现服务器错误，错误：找不到react-redux上下文值；请确保组件包装在<Provider>中
- 3
Swift 2.1-对单个单元格使用UITableView
- 4
SQL Server中的非确定性数据类型
- 5
如何避免每次重新编译所有文件？
- 6
Hashchange事件侦听器在将事件处理程序附加到事件之前进行侦听
- 7
在同一Pushwoosh应用程序上Pushwoosh多个捆绑ID
- 8
HttpClient中的角度变化检测
- 9
在 Avalonia 中是否有带有柱子的 TreeView 或类似的东西？
- 10
在Wagtail管理员中，如何禁用图像和文档的摘要项？
- 11
通过iwd从Linux系统上的命令行连接到wifi（适用于Linux的无线守护程序）
- 12
构建类似于Jarvis的本地语言应用程序
- 13
Camunda-根据分配的组过滤任务列表
- 14
如何了解DFT结果
- 15
Embers js中的更改侦听器上的组合框
- 16
ggplot：对齐多个分面图-所有大小不同的分面
- 17
使用分隔符将成对相邻的数组元素相互连接
- 18
PHP Curl PUT 在 curl_exec 处停止
- 19
您如何通过 Nativescript 中的 Fetch 发出发布请求？
- 20
错误：找不到存根。请确保已调用spring-cloud-contract：convert
- 21
应用发明者仅从列表中选择一个随机项一次
我来说两句