约束叠加到图像高度？

Question

我在将透明叠加层和文本限制为背景图像的高度时遇到困难。 我尝试使用媒体查询来检测纵向/横向模式，但是当要显示大量文本时，它不能很好地工作。

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

这是我尝试使用媒体查询来检测方向的尝试。 它工作得很好，除非有大量文本： http : //jsfiddle.net/9ky7xfmd/1/

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;
                }
            }

Answer 1

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

德文