[英]Constraint Overlay to Image Height?
I'm having difficulty in constraining a transparent overlay & text to the height of a background image. 我在将透明叠加层和文本限制为背景图像的高度时遇到困难。 I tried media queries to detect portrait/landscape modes but it doesn't work well when there is a large amount of text to display. 我尝试使用媒体查询来检测纵向/横向模式,但是当要显示大量文本时,它不能很好地工作。
How can I constraint the height of the transparent overlay & the text to the height of the native image (even as it's resized) while still allowing the overlay & text to be scrollable within the image height? 我如何将透明叠加层和文本的高度限制为本机图像的高度(即使已调整大小),同时仍然允许叠加层和文本在图像高度内滚动?
Here's my attempt with media queries to detect orientation. 这是我尝试使用媒体查询来检测方向的尝试。 It works well except when there is a large amount of text: http://jsfiddle.net/9ky7xfmd/1/ 它工作得很好,除非有大量文本: 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;
}
}
You should use overflow(-x/-y) scroll :) 您应该使用溢出(-x / -y)滚动:)
Devlen 德文
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.