Question

我还没有找到适合我的答案 - 我希望有人可以提供帮助。我的CSS技能缺乏......

我在网页中显示的视频会有文字叠加层。我的问题是，在我的屏幕上，叠加层位于正确的位置。当将其投影到大屏幕上时，叠加层位于错误的位置。

用于解决此问题的最佳策略是什么？在CSS中定位叠加层？使用面板？代码如下......

CSS：

.video {
        position:absolute;
        bottom:0px;
        left:0px;
        width:50%;
        height:80%;   
    }

    #vidPlayer {
            position:absolute;
            bottom:-100px;
            left:0px;        
            width:100%; 
            display:block;
            z-index:99;
        }

    .overlayLabel {
        font-size:xx-large;
        font-weight:bolder;
        font-style:italic;
        color:antiquewhite;
        position:absolute;
        text-align:center;
        bottom:50px;
        left:100px;
        width:900px;  
        border:2px solid red;      
        z-index:2147483647;
    }

HTML：

<div>
    <article class="video">      
        <video id="vidPlayer" title="My Video" >
            <source src="Media/MyVideo.mp4"  type="video/mp4" />
        </video>
        <asp:Label ID="lblWinner" runat="server" Text="Test Overlay" CssClass="overlayLabel"></asp:Label>      

    </article>
</div>

我的更改修复了我遇到的以下问题：

用于在视频上显示带文字的叠加层（动态设置文字）
视频现在的大小正确

无论屏幕大小如何，叠加层都能正确定位

.video {
    position:relative;
    width:100%;
    height:auto;   
}

#vidPlayer {
    z-index:99;
    position:relative;     
    width:100%; 
    height:100%;
    }

.overlayLabel { 
    z-index:2147483647;
    position:absolute;    
    background-image:url("Images/test.png");
    -webkit-transform: rotate(13deg);
    -moz-transform: rotate(13deg);
    -ms-transform: rotate(13deg);
    -o-transform: rotate(13deg);
    transform: rotate(13deg);
    font-size:xx-large;
    font-weight:bolder;
    text-align:center; 
    color:black;       
    bottom:44%;
    left:37%;
    width:30%; 
    height:24%;      
}

Answer 1

您需要对设计做出响应。

您可以使用CSS媒体查询，因此在不同的分辨率（宽度）上有不同的样式规则，用于定位标签/文本。请参阅this。

或者您可以使用％，vh，vw 等响应单位代替 px 进行定位。

我更喜欢使用媒体查询。

如何在不同分辨率的屏幕上将叠加层保持在同一位置？

1 个答案: