个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我有两个 img 元素，我希望第一个 image.png 位于透明 image.png 的后面。我尝试了很多不同的东西(z-index、透明背景颜色、rgba 背景颜色、绝对定位和相对定位、在 div 中嵌套一个、使它们都成为 div)。现在我一直在尝试使用透明的 .png 图像。图像 .png 实际上在它后面，但它仍然通过它显示出来。请帮忙。
HTML:
<body>
<main class="site-wrapper">
<div class="carnival"></div>
<div id="images">
<img id="divbox" src="images/divbox.png">
<img id="clown1" src="images/clown1.png">
</div>
</main>
</body>
js:(我在 js b/c 中做了样式，我有兴趣学习如何以这种方式做):
//styles
//divbox:
document.getElementById('divbox').style.display = "inline-block";
document.getElementById('divbox').style.transform = "skew(-2deg)";
document.getElementById('divbox').style.marginTop = "21%";
document.getElementById('divbox').style.marginLeft = "47.6%";
document.getElementById('divbox').style.height = "200px";
document.getElementById('divbox').style.width = "200px";
document.getElementById('divbox').style.border = "1px solid orange";
document.getElementById('divbox').style.position = "absolute";
document.getElementById('divbox').style.zIndex = "2";
//clown1:
document.getElementById('clown1').style.display = "inline-block";
document.getElementById('clown1').style.transform = "rotate(90deg)";
document.getElementById('clown1').style.marginTop = "21%";
document.getElementById('clown1').style.marginLeft = "53%";
document.getElementById('clown1').style.border = "1px solid green";
document.getElementById('clown1').style.position = "relative";
document.getElementById('clown1').style.zIndex = "1";
感谢您的帮助，如果我可以回答问题，请告诉我。
更新:
抱歉没说清楚。我现在已经实现了将图像放在另一幅图像后面，但是由于顶部图像是透明的，后面的图像正在显示。我该如何阻止呢？
这是一个正在发生的事情的例子:
http://oi61.tinypic.com/2mw9egx.jpg
请注意橙色边框位于顶部，因此它绝对位于顶部。
更新 2:
这应该很清楚我想要什么。再次对造成的困惑表示抱歉:
最佳答案
我会做类似下面的 jsFiddle 的事情:http://jsfiddle.net/7gdx48fu/ .可能需要重新加载几次才能看到覆盖工作的一个很好的例子。
为您的两个图像创建一个包装器 DIV。将该包装器 DIV 设置为 position: relative，这样我们就可以在它包含的其中一张图像上使用绝对定位。通过这样做，我们可以防止绝对定位的图像可能在页面的其他地方自行对齐，例如浏览器窗口的左上角。
然后，将我们的叠加图像(透明 PNG)的位置设置为 position: absolute 以及 top: 0 和 left: 0 将其与第一张图片的左上角对齐。
如果您观看包含图像的顺序，则无需使用 z-index 即可执行此操作。首先将您想要的图像放在标记中透明 PNG 的后面，然后是透明 PNG。
<div class="img-container">
<img src="http://lorempixel.com/200/200/city/">
<img class="overlay" src="http://lorempixel.com/200/200/city">
</div>
.img-container {
position: relative;
}
.overlay {
position: absolute;
top: 0;
left: 0;
opacity: 0.25; /* using this to replicate the transparent PNG */
}
编辑
OP 的要求已更改为包括如何防止透明图像后面的图像透过透明图像显示。
这是一个更新的 jsFiddle:http://jsfiddle.net/7gdx48fu/2/ .
在这种方法中，我将透明的 PNG 包装在一个包装器 DIV 中，并设置它的背景颜色。我在示例中使用了白色，但您可以使用任何颜色。
<div class="img-container">
<img src="http://lorempixel.com/200/200/city/">
<div class="overlay">
<img src="http://lorempixel.com/200/200/city">
</div>
</div>
.img-container {
position: relative;
}
.overlay {
position: absolute;
top: 0;
left: 0;
background-color: white;
top: 15px; /* shifting overlay for illustrative purposes - not use case code */
left: 15px; /* shifting overlay for illustrative purposes - not use case code */
}
.overlay img {
opacity: 0.25; /* using this to replicate the transparent PNG */
}
不完美，但我不确定还能如何进行。
编辑 2
看来 OP 想要做一种掩蔽形式。您可以使用 overflow: hidden 来做到这一点。
我已经更新了 jsFiddle:http://jsfiddle.net/7gdx48fu/4/
在这个更新的答案中，我保留了包装器 DIV 并将其设置为固定的宽度和高度。然后应用 overflow: hidden。我们在这里所做的是创建一个不可见的窗口，该窗口仅在窗口尺寸范围内显示内容。
要使图像看起来像是来自基础层图像，只需调整包装 DIV 中图像的位置即可。对于 jsFiddle，只需使用 .mask img 中 top 的值即可。
这需要对 .mask DIV 的适当位置和大小进行一些调整以满足您的需求，但希望能为您指明正确的方向。
<div class="img-container">
<img src="http://lorempixel.com/200/200/city/">
<div class="mask">
<img src="http://lorempixel.com/200/50/city">
</div>
</div>
.img-container {
position: relative;
}
.mask {
position: absolute;
top: 25px;
left: 25px;
height: 100px;
width: 100px;
overflow: hidden;
border: 1px solid red; /* for illustrative purposes */
}
.mask img {
position: relative;
top: 25px;
}
关于javascript - 如何将 img 元素放在透明 img 元素后面？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26490003/
25
4
0
我想禁用我的 UIButton，所以我调用: button.enabled = FALSE; 然而，这会使按钮变得透明，我可以看到它下面的元素。我不介意它改变颜色，我只是不希望它是透明的。 我尝试在
一个常规的 NSButton 如果被禁用，它似乎是透明的。 图像显示了一个样式为“push”的按钮 但是，我想禁用没有透明度的按钮。 我试图以编程方式将 alphaValue 设置为 1.0 但似乎
我正在尝试将Memoji从iPhone/Mac转换为具有透明背景的一系列png，以便我可以创建一个 Sprite 表。当按下空格键时，我可以清楚地看到它具有透明背景，但是在运行 ffmpeg -i s
我想创建一个具有部分透明背景的 View (舞台、窗口)。我有一张包含 Alpha channel 的图像 我在JavaFx中使用了这种场景，我必须将场景填充设置为空，并将根节点背景颜色设置为透明。我
我想创建一个具有部分透明背景的 View (舞台、窗口)。我有一张包含 Alpha channel 的图像 我在JavaFx中使用了这种场景，我必须将场景填充设置为空，并将根节点背景颜色设置为透明。我
我想将 JDesktopPane 设置为透明，并允许我单击下面的内容(例如桌面图标等)。内部框架应保持不透明，并且能够像当前一样在屏幕周围重新定位。有什么想法吗？ package test1;
我知道我不是第一个提出此类问题的人，但我认为我的问题有点不同。 我在 MS Paint 上绘制了一个 png 图像，它是一个播放器，当我使用图形对象绘制图像时，我希望图像的背景是透明的。我尝试了一些带
我在 Mac 的 swift 项目中想使用单选按钮，但与我的背景颜色相同。如何将背景设置为不透明或更改背景颜色？ 最佳答案 我找到了解决此问题的方法。将单选按钮的文本设置为“”，将 rb 添加到水平堆
我无法将我的相对布局设置为透明。我尝试了很多不同的方法，从类中自定义 View ，添加 android:background="@android:color/transparent"等。它们要么像下图
在 Storyboard中，我创建了一个 ![UINavigationController] 及其 Root View Controller UIViewcontroller。在工具栏中，我有一个分段
我必须让我的导航栏透明，我试过这段代码: self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: UIB
我注意到，如果我将 View 背景颜色设置为透明，则在 segue 过渡结束后背景颜色会变成黑色(我猜这是默认的“视口(viewport)”颜色)。 我可以改变吗？当然，我可以将颜色从透明更改为紫色，
嘿，有没有可能让滚动条“隐藏”，我不想使用 overflow-y: hidden就像背景:透明或类似的东西 最佳答案 Here您会找到有关如何仅使用 CSS 隐藏滚动条的说明。 在第二个example
默认情况下，背景显示为白色。是否可以通过任何方式将其背景颜色更改为透明..？ (function() { var cx = '005519348941191855053:d0uziw7c
我正在尝试添加一个在 div 的左右边缘具有透明度/淡出的嵌入框阴影。我设法添加了一个普通的嵌入框阴影，但我不知道如何为边缘添加透明度。我该怎么做？ 这是我正在努力实现的一个例子。 .contai
如何删除 周围的边框并使其背景透明？ 最佳答案 试试这个: border: none; border-color: transparent; 关于html - 透明、无边框的文本输入，我们在Stac
是否可以使 JButton 透明(包括边框)而不是文本？我扩展了 swing 的 JButton 并覆盖了它: @Override public void paint(Graphics g) {
众所周知，要使QWidget/QOpenGLWidget半透明/透明，只需: widget->setAttribute(Qt::WA_TranslucentBackground) 但是，由于 QWin
我想知道如何在 Ubuntu 中为所有应用程序制作透明 Gnome 终端，我知道我们可以为桌面制作透明终端，而不是为所有应用程序制作透明终端。我用谷歌搜索了很多，但找不到任何解决方案。谁能告诉我该怎么
我想让 SWT Canvas 的背景透明，以便可以看到它后面的其他小部件。 我尝试将 alpha 设置为 0 并用矩形填充 Canvas ，并且还使用选项 SWT.NO_BACKGROUND 无济于事
我是一名优秀的程序员,十分优秀！