css - 如何定位两个透明图像以重叠容器 div 的对 Angular

标签 css image positioning html overlapping

我从打印图形设计师那里得到了这个 PSD 合成,但我不确定它是否可以在网络上使用。
请注意,黑色边框的圆 Angular 容器(如下图所示)已经存在。此页面上有多个 z 索引的 div,因此很难确定哪个在堆叠顺序上具有优先权。

enter image description here

如您所见,我在左上角和右下角放置了两条灰色丝带(代表一个装有丝带和装饰品的盒子),还有两张图片(较小的蓝色盒子,即: :/From:) 在那些“丝带”下面,但在容器的顶部。容器的背景颜色为白色。左上角必须有透明背景,这样较小的蓝色框才能显示出来。有人能告诉我这些“倾斜的丝带”在这个圆 Angular 容器 div 上的位置吗?或者如果这甚至可以使用 CSS 和 HTML 来完成。

最佳答案

最简单的答案是有两个 <img>的,并让它们都绝对定位。用 top:0px; left:0px 定位一个;和一个 bottom:0px; and right:0px ;.给它们一个高 z-index 以确保它们位于 div 的顶部。确保父 div 有 position: relative定义。

关于css - 如何定位两个透明图像以重叠容器 div 的对 Angular ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7878101/

相关文章:

javascript - 我可以同步多个图像加载调用吗?

css - Bootstrap 导航栏定位在其他 div 的底部

angularjs - 如何从 Ionic CSS 中排除 HTML 元素

css - webfonts:@font-face 应该包括 font-style 和 font-weight?

css:浏览器缩放时图像出现问题

html - 在 CSS 中显示带有文本的内联图像

html - 将输入文本框定位在中心

html - 您将如何设置此 html 的样式以便将所有内容都放入表格中?

css - 横向滚动问题

javascript - document.body.style.backgroundColor 不适用于外部 CSS 样式表