[英]div to only show on background image
On this website - Uggerhøj Improve , I would like the little div in bottom right corner (the one that says Fotograf: Erik Refner ) to only appear on the background image. 在这个网站-UggerhøjImprovement上 ,我希望右下角的小div(表示Fotograf:Erik Refner的那个 )仅出现在背景图像上。 When I scroll down and get past the image to the black background, the text should disappear behind the background.
当我向下滚动并经过图像到达黑色背景时,文本应在背景后面消失。 I've tried
z-index: -1
but I'm not sure how to use the z-index properly. 我已经尝试过
z-index: -1
但不确定如何正确使用z-index。 Can you help me? 你能帮助我吗?
The z-index of the background should be lower than the z-index of the bottom right div, and the z-index of the bottom right div should be greater than the z-index of the background 背景的z-index值应低于右下角div的z-index,底部右div的z-index应大于背景的z-index
So something like this? 像这样吗?
section
{
z-index: 6;
}
.fotograf
{
z-index: 5;
}
Note that the numbers I am using here are just examples. 请注意,我在这里使用的数字仅是示例。
You need to set the position
property to a value other than static
in order for the z-index to be considered. 您需要将
position
属性设置static
值,以便考虑z-index。 Also, the z-index of the element that should appear on top should be higher than the z-index of the element that should be hidden. 此外,应显示在顶部的元素的z索引应高于应隐藏的元素的z索引。
In your case, the div
on the bottom ( Fotograf ) should have a z-index
of, say, 2. The background image should have a z-index
of 1, so that it goes behind and the one with the black background should have a z-index
of 3, so that it always appears on top. 在您的情况下,底部的
div
( Fotograf )的z-index
为2。背景图片的z-index
为1,这样它就落后了,黑色背景的div
应为z-index
为3,因此它始终显示在顶部。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.