html - 位置 : relative; interrupts css opacity in web page

标签 html css

在代码中添加 position: relative; 时,背景弹出窗口不会有任何不透明度 - 这是什么原因?我不明白为什么将网页居中会影响背景不透明度。

感谢任何可以提供帮助的人!!

<html>
<head>
<style>

body {
background-color: white;
width: 960px;
margin: auto;
position: relative;
}

.one {
background: black;
-webkit-border-radius: 12;
-moz-border-radius: 12;
border-radius: 12px;
font-family: Book Antiqua;
color: #ffffff;
font-size: 60px;
text-align: center;
width: 75px;
height: 75px;
overflow:hidden;
float:left;
position:absolute;
transition: .5s ease;
top: 120px;
left: 140px;
text-align: center;
text-vertical-align: middle;
}

.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.8);;
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}

.overlay:target {
visibility: visible;
opacity: 1;
}

.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}

.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}

.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}

.popup .close:hover {
color: orange;
}

.popup .content {
max-height: 30%;
overflow: auto;
}

</style>
</head>
<body>

<a class="one" id="one" href="#popup1" onclick="changeZIndex(this)">1</a>
<div id="popup1" class="overlay">
<div class="popup">
    <h2>Here i am</h2>
    <a class="close" href="#">×</a>
    <div class="content">
        1
    </div>
</div>
</div>

</body>
</html>

最佳答案

Link

htmlbody 元素添加高度

CSS

html,
body
{
    height: 100%;
}

CSS 错误

.one
{
    background: black;
    -webkit-border-radius: 12;
    -moz-border-radius: 12;
    border-radius: 12px;
    font-family: Book Antiqua;
    color: #ffffff;
    font-size: 60px;
    text-align: center;
    width: 75px;
    height: 75px;
    overflow: hidden;
    float: left;
    position: absolute;
    transition: .5s ease;
    top: 120px;
    left: 140px;
    text-align: center;


    /* incorrect value
     text-vertical-align: middle;
    */


}

.overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.8);

    /*
      transition: opacity 500ms;
   */

    transition: opacity 0.5s;

    visibility: hidden;
    opacity: 0;
}

关于html - 位置 : relative; interrupts css opacity in web page,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33093868/

相关文章:

html - CSS 水平对齐段落

javascript - 输入最大长度不适用于 Android -Ionic

javascript - 无法让路由与 AngularJS 一起工作

javascript - 更改 Bootstrap Accordion 面板的宽度(折叠元素)

python - 为什么 css 样式不适用于 GtkButton?

html - 如何根据窗口宽度调整菜单宽度

javascript - d3 SVG 中的 Angular 指令

html - 单击以在没有 JS 的移动设备上打开和关闭 Bootstrap 汉堡菜单

css - Bootstrap Accordion - 在图标之后

html - 基于数据名称的 CSS?