Html 约束覆盖到图像高度？

我很难将透明覆盖和文本约束到背景图像的高度。我尝试了媒体查询来检测纵向/横向模式，但是当有大量文本要显示时，它就不能正常工作

如何将透明覆盖层和文本的高度限制为本机图像的高度（即使调整了大小），同时仍允许覆盖层和文本在图像高度内滚动

下面是我尝试使用媒体查询来检测方向。它运行良好，除非有大量文本：

您应该使用溢出（-x/-y）滚动：）

---

Devlen

*我之所以尝试这样做，是因为移动设备将横向图像的大小调整到屏幕大小的一半左右。我正在尝试在所有方向上强制使用风景视图。很抱歉，回复太晚，我一直在尝试测试它。它工作得很好！但它会导致滚动条显示在覆盖图中，使其看起来很奇怪。谢谢你的回复！我现在必须弄清楚如何处理滚动条lol…Sry，用于后期的awnser^^^^但您可以设计滚动ui！这是一篇解释得很好的帖子^^

body {
    background-image: url("http://www.gracotechgrupa.hr/img/site/header_homes/icon/zastita-metalnih-dijelova.jpg");
    background-color: black;
    width: 100%;
    height: auto;
    display: block;
    background-repeat:no-repeat;
    overflow-y: auto;
    overflow-x: hidden;
} 

@media all and (orientation:portrait) {
                /* Styles for Portrait screen */
                .headline {
                    display: block;
                    color: blue;
                    -webkit-box-shadow: inset 0px 0px 300px 28px rgba(255,255,255,0.77);
                    -moz-box-shadow: inset 0px 0px 300px 28px rgba(255,255,255,0.77);
                    box-shadow: inset 0px 0px 300px 28px rgba(255,255,255,0.77);
                    background: rgba(255,255,255,0.73);
                    padding-top: 0.7%;
                    padding-bottom: 1%;
                    padding-left: 3%;
                    padding-right: 3%;
                    height: 20%;
                    position: absolute;
                    margin-left: 25%;
                    margin-right: 25%;
                    top: 12.5%;
                    max-width: 45%;
                    font-size: 36px; /* Some tweener fallback that doesn't look awful */ 
                    font-size: 2.25vmin; /* This was originally 1.33vw & 1.718vmin  */
                    opacity:1;
                    z-index: 2;
                }
            }
            @media all and (orientation:landscape) {
                /* Styles for Landscape screen */
                .headline {
                    display: block;
                    color: blue;
                    -webkit-box-shadow: inset 0px 0px 300px 28px rgba(255,255,255,0.77);
                    -moz-box-shadow: inset 0px 0px 300px 28px rgba(255,255,255,0.77);
                    box-shadow: inset 0px 0px 300px 28px rgba(255,255,255,0.77);
                    background: rgba(255,255,255,0.73);
                    padding-top: 0.7%;
                    padding-bottom: 1%;
                    padding-left: 3%;
                    padding-right: 3%;
                    height: auto;
                    position: absolute;
                    margin-left: 25%;
                    margin-right: 25%;
                    top: 12.5%;
                    max-width: 45%;
                    font-size: 36px; /* Some tweener fallback that doesn't look awful */ 
                    font-size: 2.25vmin; /* This was originally 1.33vw & 1.718vmin  */
                    opacity:1;
                    z-index: 2;
                }
            }