html - 如何将元素 1 的颜色叠加在主体或元素 2 的颜色上?

标签 html css

在我的 html 中,我给了 body 一种颜色,我需要在它上面放置另一个具有它自己颜色的元素。我已经尝试过使用 z-index 的相对位置和绝对位置。

这是 body 标签。

<body bgcolor="cyan" style="position: relative;">

这是另一个元素。

<p class="content">a</p>

这是我在网上搜索使用的css。

.content{
position: fixed; /* Sit on top of the page content */
display: none; /* Hidden by default */
width: 100%; /* Full width (cover the whole page) */
height: 100%; /* Full height (cover the whole page) */
top: 0; 
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5); /* Black background with opacity */
z-index: 10;
}

最佳答案

一切似乎都在这里!只需从您的 css 中删除 display:none

.content{
position: fixed; /* Sit on top of the page content */
width: 100%; /* Full width (cover the whole page) */
height: 100%; /* Full height (cover the whole page) */
top: 0; 
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5); /* Black background with opacity */
z-index: 10;
}

现在应该如您所料出现了!

关于html - 如何将元素 1 的颜色叠加在主体或元素 2 的颜色上?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56224642/

相关文章:

javascript - 自定义组合框焦点不会转移到选择 elem,并且 eventBubble 不会停止。在 IE 中运行良好,但在其他浏览器中运行不佳

JQuery 颜色框 : Resize very large image to given size

java - 在 eclipse rcp 应用程序中添加工具栏

javascript - jQuery 窗口滚动关闭后重新打开

html - 在 HTML 中,我可以用 ✓ 打勾。有对应的 X 标记吗?

javascript - 如何设置文件上传按钮的样式

html - 表格单元格中的 CSS 文本颜色

html - Bootstrap 4 和用户详细信息 - 如何做 "bootstrap"或正确的方法?

css - SharePoint - 更改主题样式表

Javascript - 使用 anchor 从外部链接显示/隐藏表格?