Question

我一直试图将显示在悬浮水平中心的文字（h2）定位在各自图像的底部附近。

我被告知要使用汽车保证金，但他们似乎根本没有改变任何东西。将它与％或px对齐在移动设备上完全没问题，除非我遗漏了一些重要的东西。（经验，或缺乏，说我是！）。

我还似乎无法在悬停文本时让灰度过滤器保持应用状态，但我还没有对它进行煽动。

谢谢！

这是我的代码：

＆＃13;

/*CSS Document*/
/*MAIN CSS SETTINGS*/
body {
    padding: 0px;
    background-color: none;
}

p, h1, h2, h3, h4, h5, ul {}

	h1 {font-family: serif, arial;}

	/*LINK STYLING*/
	 /* unvisited link */
	a:link {
	    color: transparent;
	    text-decoration: none;
	    transition: color 1s ease;
	    -webkit-transition: color 1s ease;
	}

	/* visited link */
	a:visited {
	    color: transparent;
	    text-decoration: none;
	    transition: color 1s ease;
	    -webkit-transition: color 1s ease;
	}

	/* mouse over link */
	a:hover, ::-moz-selection {
	    color: white;
	    text-decoration: none; /* Safari */
    	transition: color 1s;
	}
	a:hover, ::selection {
	    color: white;
	    text-decoration: none; /* Safari */
    	transition: color 1s;
	}

	/* selected link */
	a:active {
	    color: transparent;
	    text-decoration: none;
	    transition: color 1s ease;
	    -webkit-transition: color 1s ease;
	}
	/*END LINK STYLING/*
/*END MAIN SETTINGS CSS*/
/*SCROLLBAR*/
::-webkit-scrollbar-track {	
	visibility: hidden;
}

::-webkit-scrollbar {
	width: 4px;
	visibility: hidden;
}

::-webkit-scrollbar-thumb {
	background-color: white;	
}
/*TITLE AREA*/
.header {
	padding: 0;
	margin:	0;	
}
.header h1 {
	text-align: center;
	letter-spacing: 12px;
	font-size: 5em;

	border-top: 1px solid black;
	border-bottom: 1px solid black;
}
/*CONTENT AREA*/
.flexbox {
	display: flex;
	justify-content: center;
	align-items: center;

	margin-top: 15vh;

	/*border-top: 32px dotted black;
	border-bottom: 32px  black; */

	padding: 10px;
}

.pictures {
	overflow: hidden;
	height: 50vh;
	width: 30vw;

	padding: 0;
	margin: 0;

	display: flex;
	justify-content: center;
	align-items: center;

	margin-left: 10px;
	margin-right: 10px;

}
.pictures img {
	object-fit: cover;
	height: 50vh;
	width: 30vw; /*ALWAYS SAME AS .pictures width: x;*/

	-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}


.pictures img:hover  {
	-webkit-filter: grayscale(0%);
    filter: grayscale(0%);
}


@media screen and (max-width: 1025px) {

	.header h1 {font-size: 10vw;}

	.flexbox {
		flex-direction: column;
		margin-top: 7vh;

		/*border-top: 20px dotted black;
		border-bottom: 20px dotted black; */
	}
	.pictures {
		height: 25vh;
		width: 100vw;
	}
	.pictures img {
		height: 25vh; /*ALWAYS SAME AS .pictures width: x;*/
		width: 100vw;
	}
}
 .pictures h2 {
 	position: absolute;
 	z-index: 50;

 	margin-top: 22%;

 	font-family: helvetica;
 	font-size: 3em;
 	text-transform: uppercase;
 }
}
/*MENU ARE*/
/*FOOTER AREA*/

＆＃13;

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="style.css">
	<title>TEST</title>
</head>
<body>
	<div class="header">
		<h1>HELLO!</h1>
	</div>
	<div class="flexbox">
		<div class="pictures picture1">
			<a href="#A">
					<h2>this is h2</h2>
				<img src="http://i.imgur.com/MSDFGok.jpg">
			</a>
		</div>
		<div class="pictures picture2">	
			<a href="#B">
							<h2>same here</h2>
				<img src="http://i.imgur.com/sl3NvTE.jpg">
			</a>
		</div>
		<div class="pictures picture3">
			<a href="#C">
			
				<h2>Yep, this too.</h2>
				<img src="http://i.imgur.com/81VsbWp.jpg">
			</a>
		</div>
	</div>
</body>
</html>

＆＃13;

在flexbox中的图像上准确的文本位置

0 个答案: