标签：font blend 1em 混合 background 标题 border CSS size
Result
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.blend {
background-image: url("bear.jpg");
background-size: cover;
background-position: center;
padding: 5em 0 10em;
}
.blend>h1 {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 6rem;
text-align: center;
/* 使用强光混合模式 */
mix-blend-mode: hard-light;
background: #c33;
/* 为前景元素设置文字和背景颜色 */
color: #808080;
border: .1em solid #ccc;
border-width: .1em 0;
}
</style>
</head>
<body>
<div class="blend">
<h1>Ursa Major</h1>
</div>
</body>
</html>
标签：font,
blend,
1em,
混合,
background,
标题,
border,
CSS,
size
From： https://www.cnblogs.com/openmind-ink/p/16917082.html