Question

我已成功获得视频以正确放入div中，并且由于此SO answer而一直完全填充它。

我已经对代码进行了一些修改，但我对此代码的工作原理感到困惑。

    video
        position: absolute
        opacity: 0.1
        z-index: 0
        top: 0px
        left: 50%
        min-width: 100%
        min-height: 100%
        right: 0px
        margin: auto
        width: auto
        height: auto
        overflow-x: hidden
        transform: translateX(-50%)

我不知道变换的作用以及如何将其修复为左上角以外的其他内容。我认为有min-属性可以使这项工作有效，但我不确定。

Answer 1

绝对定位元素相对于其父元素（也可以是浏览器窗口）的位置由顶部或底部和左或右参数定义（默认为top：0; left：0; ）。如果左边是50％，则表示左边框正好移动到容器的水平中间。 transform: translateX(-50%)将它向左移动（由负值引起）50％，但这次是元素本身的50％。这导致元素水平地居中。 overflow-x: hidden;确保元素与其容器不重叠 - 溢出的部分将保持不可见。

您可以使用top 50%; transform: translateY(-50%); overflow-Y: hidden;

垂直执行相同操作

高级CSS - 不要理解这个解决方案

1 个答案: