我正在尝试用我制作的背景图像来样式化我的h2。
现在的图像是裁剪,除非我添加一个愚蠢的填充量的h2。我希望背景图像显示在全部。我还想将它定位到h2的左下方。这是我目前使用的:在这里输入图像描述
background-image: url('.png');
background-size: cover;
background-position: left;
background-size: 300px;
background-repeat: no-repeat;
我应该补充说,我在这里寻找答案,并尝试
font - family:宋体;
,它使图像完全消失。
我只是在我的html上使用CSS,所以我在那里寻找答案....我只是在学习。
谢谢。
可以用background-size: contain
代替cover
它将显示完整的图像,因为这个值的目标是显示整个图像,而cover
必须覆盖尽可能多的空间。
section {
position: relative;
width: 300px;
height: 300px;
background-image: url("https://www.testdome.com/files/resources/12362/09c8d5be-c7d7-4051-8dbf-4c4b94d1bb1b.jpeg");
background-size: cover;
background-position: left;
background-repeat: no-repeat;
}
h1 {
position: absolute;
bottom: 0;
margin: auto
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Avatar</title>
<link rel="stylesheet" href="app.css">
</head>
<body>
<section>
<h1>Conclusion</h1>
</section>
</body>
</html>