html - 为什么我的背景在我的文字前面？-6ren

html - 为什么我的背景在我的文字前面？

转载作者：行者123 更新时间：2023-11-27 23:23:12

25

4

为什么我的背景在文字前面？

所以我有这样的 .html 和 .css 文件我尝试了相对位置、绝对位置、固定位置，但输出仍然不是我想要的。

    .main-main-container{
    	position:absolute;
    	display: grid;
    	height: 100vh;
    	margin:0;
    	padding:0;
    	
    }
    
    .main-container{
    	display: grid;
    	//grid-template-rows: minmax(20%,auto) auto minmax(20%,auto) minmax(10%,auto);
    	grid-template-rows: 1fr 4fr 1fr 40px ;
    	grid-gap: 0.5em;
    	
    }
    
    /*
    @keyframes sliding-background{
    	0%{
    		background-image: url(../images/Desert.jpg);
    	}
    	25%{
    		background-image: url(../images/Hydrangeas.jpg);
    	}
    	50%{
    		background-image: url(../images/Jellyfish.jpg);
    	}
    	75%{
    		background-image: url(../images/Lighthouse.jpg);
    	}
    	100%{
    		background-image: url(../images/Penguins.jpg);
    	}
    
    }
    */
    
    .main-container > figure {
    	animation: imageAnimation 30s linear infinite 0s;
    	backface-visibility: hidden;
    	background-size: cover;
    	background-position: center center;
    	color: transparent;
    	height: 100%;
    	left: 0px;
    	opacity: 0;
    	position: absolute;
    	top: 0px;
    	width: 100%;
    	z-index: 0;
    	margin:0;
    	padding:0;
    }
    .main-container > figure:nth-child(1) {
    	background-image: url('../images/Desert.jpg');
    }
    .main-container > figure:nth-child(2) {
    	animation-delay: 6s;
    	background-image: url('../images/Hydrangeas.jpg');
    }
    .main-container > figure:nth-child(3) {
    	animation-delay: 12s;
    	background-image: url('../images/Jellyfish.jpg');
    }
    .main-container > figure:nth-child(4) {
    	animation-delay: 18s;
    	background-image: url('../images/Lighthouse.jpg');
    }
    .main-container > figure:nth-child(5) {
    	animation-delay: 24s;
    	background-image: url('../images/Penguins.jpg');
    }
    
    @keyframes imageAnimation {
    	0% {
    		animation-timing-function: ease-in;
    		opacity: 0;
    	}
    	8% {
    		animation-timing-function: ease-out;
    		opacity: 1;
    	}
    	17% {
    		opacity: 1
    	}
    	25% {
    		opacity: 0
    	}
    	100% {
    		opacity: 0
    	}
    }
    
    .header-container {
    	display: grid;
    	grid-template-columns: 1fr 2fr 1fr;
    	//background: red;
    	
    }
    
    .content-container {
    	display: grid;
    	grid-template-columns: 1fr 2fr 1fr;
    	//background: yellow;
    }
    
    .subcontent-container {
    	display: grid;
    	grid-template-columns: 1fr 2fr 1fr;
    	//background: green;
    }
    
    .header-container > div,
    .content-container > div,
    .subcontent-container > div{
    	border: #222 1px solid;
    }
    
    .content{
    	//background: green;
    }
    
    .sub-content{
    	//background: yellow
    }
    
    .footer-container{
    	//background: pink;
    	border: #222 1px solid;
    	
    }

    <body class="main-main-container">
    	<div class="main-container">
    		<figure></figure>
    		<figure></figure>
    		<figure></figure>
    		<figure></figure>
    		<figure></figure>
    		<div class="header-container">
    			<div class="header-left">
    				Lorem ipsum dolor sit amet.
    			</div>
    			<div class="header-center">
    				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, quis ducimus sed in exercitationem quae, molestias placeat eius eveniet molestiae repellendus animi dignissimos, non nostrum facere id iste fugit aspernatur est perferendis? Eaque tempora nesciunt deleniti voluptatem ad quisquam voluptatum.
    			</div>
    			<div class="header-right">
    				Lorem ipsum dolor sit amet.
    			</div>
    		</div>
    		<div class="content-container">
    			<div class="content-left">
    				Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorem amet maiores, voluptatem quibusdam et veritatis repellendus reiciendis dolor facilis assumenda.
    			</div>
    			<div class="content-center">
    				Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorem amet maiores, voluptatem quibusdam et veritatis repellendus reiciendis dolor facilis assumenda.
    			</div>
    			<div class="content-right">
    				Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorem amet maiores, voluptatem quibusdam et veritatis repellendus reiciendis dolor facilis assumenda.
    			</div>
    		</div>
    		<div class="subcontent-container">
    			<div class="subcontent-left">
    				Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat, nam.
    			</div>
    			<div class="subcontent-center">
    				Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat, nam.
    			</div>
    			<div class="subcontent-right">
    				Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat, nam.
    			</div>
    		</div>
    		<div class="footer-container">
    			<div>
    				Lorem ipsum dolor sit amet.
    			</div>
    		</div>
    	</div>
      </body>

我想要的是我的滑动图形在我的文本后面，所以它成为我的背景图像而不是替换它前面的我的文本。

最佳答案

.main-container > figure{
    z-index: -1;
}

working Fiddle

我认为这会让它发挥作用。

关于html - 为什么我的背景在我的文字前面？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57903862/

25

4

0

文章推荐： css - 波浪形状与 CSS

文章推荐： html - 如何修复剪辑路径切断包裹图像的一小部分？

文章推荐： javascript - ng-options 值等于对象而不是值字符串

文章推荐： css - 背景附件效果:fixed but with img blocks and position

python代码第一行语句前面
很高兴和你分享一些有关写python代码的经验，简直就像是品尝一口甜甜的草莓冰淇淋。每当我开始写python代码的时候，就仿佛是开启了一段奇妙的冒险，每一行代码都是我的剧情发展，每一个bug都是我的挑
sql - 不清楚 LAST_VALUE - 前面
我有一张看起来像这样的 table ， Date Value 01/01/2010 03:59:00 324.44 01/02/2010 09:31:00
python - Pandas :如何在散点图中绘制一条线并将其带到后面/前面？
我已尽我所能检查但未找到任何 kwds允许您在 y=a-x 上画一条线(例如 pandas )散点图(不一定是最佳拟合线)并将其带到后面(或前面)。 #the data frame ax=df.plo
python - Pandas :如何在散点图中绘制一条线并将其带到后面/前面？
我已尽我所能检查但未找到任何 kwds允许您在 y=a-x 上画一条线(例如 pandas )散点图(不一定是最佳拟合线)并将其带到后面(或前面)。 #the data frame ax=df.plo
javascript 放在 head 前面？
我正在尝试在书签中使用 jquery UI 作为 slider 。并且 jquery ui 要求在普通 jquery 文件之后包含该文件。所以到目前为止我所尝试的只是将脚本附加到 header ，同
javascript - 将下一个元素添加到 div 前面
我正在尝试将 div (.portrait_text) 添加到容器 (.gallery_container) 中: 每个图像都会添加到其相应的 .gallery_container 前面。但我也想将
c++ - 有没有办法可以将字符串数组成员放在 ".structurevariable"前面？
因此，为了避免让自己头疼(反而制造头疼)，我试图将一个字符串数组成员放在同名的结构变量前面，但它不起作用并给我一个错误:std::string {aka class std::basic_string
html - 如何将下拉菜单放在 slider 前面
嗨，我的索引页面上的下拉菜单有问题，下拉元素隐藏在我的图像 slider 下方，它位于我的导航栏正下方，我希望能够看到下拉菜单元素，任何帮助将不胜感激非常感谢；这是我的导航栏 html:
html - 将按钮移到 Div 前面
我想在 div 前面移动一个按钮。 http://demo.gbaus.com/index.html在网站中，获取报价按钮不可点击，除非您点击最底部。我希望将它移到前面，以便您可以单击它。 posot
c++ - 循环到 map 前面
我有一个以时隙为键的 map ，指向分配的客户。并非所有时隙都有指定的客户，它可能既稀疏又密集，所以我坚持使用 map。执行。如果存在分配，则仅存在键。计数器从槽 1 计数到槽 x，并在每个槽检查分
ios - 将容器置于 View 前面
我有三个 Controller 。一个是 HomeViewController 启动 BlahPageViewController 并且它是单独的页面。其他两个 Controller (BlahPag
jquery 添加到 textarea text() 前面
我有一个文本区域。我可以设置它的文本 $("#mytextarea").text("foo") 我可以像这样添加到文本区域: $("#mytextarea").prepend("foo") 但是我不能
r - 在数据后面绘制网格，而不是在 R 前面
我喜欢在绘图时生成我自己的网格线，这样我就可以控制刻度线等，我正在用“hist”绘图程序来解决这个问题。 hist(WindSpeed, breaks=c(0:31), freq=TRUE,
.net - 您发现自己经常在类(class)前面/附加哪些名字？
就目前情况而言，这个问题不太适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、民意调查或扩展讨论。如果您觉得这个问题可以改进并可能重新开放，visit
java - 在Java中发送电子邮件将 '>'字符放在单词 "From"前面
当我用 Java 发送电子邮件时，如果单词“From”是任何行的第一个单词，则在该单词的开头附加一个“>”字符，我该如何阻止这种情况？这是我的文字: The following transactio
jquery - 将文本添加到 jQuery (this).text 前面
我有这一行输出 span 标记的名称值: $(this).text($(this).attr("name")); 在“名称”值之前添加字符(特别是美元符号 ($))的最佳方式是什么。最佳答案尝试:
ios - Swift:将选项卡栏放在 View 前面
在我调用 segue 返回到以前的 View Controller 之一后，我一直在努力解决我的选项卡栏被隐藏的问题。我读到，在segue之后， View 覆盖了标签栏。有没有办法将标签栏放在 Vi
java - JLabel 位于 JSplitPane 前面
我的目标是有一个窗口，其中背景有 2 个不同颜色的面板。它们各自覆盖屏幕的特定百分比，并且会定期变化。我通过创建一个 JSplitPane 来做到这一点。但现在我想添加一个 JLabel 在屏幕中间的
android - 导航栏 - 滚动时不会在 body 前面
我试图让我的导航栏在滚动时出现在正文的顶部。目前它在下面，如图所示。我还有一个抽屉导航，它在引入 ScrollView 后就停止工作了……我觉得这可能是因为当我单击“汉堡包”图标时，它实际上位于 S
android - 我如何将域放在 AWS ESB 前面
我之前问过类似的问题，但可能不清楚。我有一个在 Amazon Elastic beanstalk 上运行的 Web 服务 (tomcat 8)，它运行良好。然后我在 DomainA.com 上运行网

首页

博学

6Ren·AI

商城

html - 为什么我的背景在我的文字前面？