Question

请向我解释这个覆盖代码...

.overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    background-color: #008CBA;
}

Answer 1

来自Mozilla的定位文档：

相对定位的元素仍被视为文档中正常的元素流。相比之下，绝对定位的元件从流动中取出，因此在放置其他元件时不占用空间。绝对定位的元素相对于最近定位的祖先（非静态）定位。如果定位的祖先不存在，则使用初始容器。

见这里：https://developer.mozilla.org/en-US/docs/Web/CSS/position?v=example 那么下面的代码可能正在做的是设置样式的项目以填充其父项，可能是整个正文或文档。如果我不得不猜测，那就是全屏叠加：

position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;

它基本上说要确保物品的任何一侧都没有空间。 width和height属性正在执行相同的操作，确保它填充其父级。 transition属性只是添加一个淡入淡出的动画，需要半秒才能完成，而background-color属性正是人们所期望的。它设置要样式化的项目的背景颜色。 opacity只意味着当淡入动画完成时，背景将是半透明的。

但这对StackOverflow来说不是一个好的或有用的问题。因为所有这些信息都可以通过Mozilla的CSS文档轻松找到：https://developer.mozilla.org/en-US/docs/Web/CSS/Reference，或者任何DuckDuckGo搜索CSS属性。

理解CSS图像叠加属性

1 个答案: