Question

我难以约束透明覆盖物和放大器。文本到背景图像的高度。我尝试使用媒体查询来检测纵向/横向模式，但是当要显示大量文本时，它无法正常工作。

如何约束透明覆盖层的高度？文本到原始图像的高度（即使它已调整大小），同时仍然允许覆盖＆amp;文本在图像高度内可以滚动吗？

这是我尝试使用媒体查询来检测方向。它很有效，除非有大量文本：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

你应该使用overflow（-x / -y）scroll：）

Devlen

约束叠加到图像高度？

1 个答案: