Question

好吧所以我基本上想要2个标题相互重叠，以便白色看起来像黑色边框，但是我似乎无法弄明白，浅灰色框就是div。

文件：

＆＃13;

body {
	background-image: url("indexbg.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
}
h1.titleTATF {
	text-align: center;
	font-family: "coalition";
	font-size: 100px;
	color: black;
}

h1.shadowTATF {
	text-align: center;
	font-family: "coalition";
	font-size: 104px;
	color: white;
}

div.wrapper {
	position: absolute;
	left: 50%;
	transform: translate(-50%, 0%);
	background: rgba(100, 100, 100, 0.25);
	width: 90%;
	text-align: center;
}

@font-face {
	font-family: coalition;
	src: url(Coalition.tff);
}

＆＃13;

<!DOCTYPE html>
<html>
	<head>
		<link rel="icon" href="tabicon.png">
		<link rel="stylesheet" type="text/css" href="index.css">
	</head>
	<body>
		<div class="wrapper">
			<h1 class="shadowTATF">TATF</h1>
			<h1 class="titleTATF">TATF</h1>
		</div>
	</body>
</html>

＆＃13;

Answer 1

您可以使用文字阴影来实现此目的，而不是重叠2个标题。

＆＃13;

.titleTATF {
  text-align: center;
	font-family: "coalition";
	font-size: 104px;
	color: white;
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
}

＆＃13;

<div class="wrapper">
  <h1 class="titleTATF">TATF</h1>
</div>

＆＃13;

叠加2个文本HTML / CSS

1 个答案: