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

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>

---

我的更改解决了我遇到的以下问题:

• 用于在视频上显示带有文本的叠加层的 CSS(动态设置的文本)
• 视频现在大小合适

• 无论屏幕尺寸如何，叠加层都正确定位

  .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 进行定位。

我更喜欢使用媒体查询。