本质上，我需要图像和标题位于屏幕中央，但我还需要图像可单击并打开链接。我相信我有正确的代码来做到这一点，但我仍然遇到这两个问题。图像也有两种不同的尺寸，因此也变得很困难。我只是尝试将红色药丸变小，将蓝色药丸变大（相对于它们的原始大小）。
不必担心其他 3 个图像的背景关键帧。我只需要有关标题居中以及红色和蓝色药丸图像的帮助。
我尝试使用在线代码，但仍然遇到相同的错误。我尝试过将图像调整为不同的尺寸，尝试过不同的居中技术，但似乎无法实现。
body {
margin: 0;
overflow: hidden;
}
#content {
position: relative;
z-index: 2;
padding: 20px;
text-align: center;
color: rgb(255, 255, 255);
font-family: Arial, sans-serif;
font-size: 24px;
}
@keyframes matrix-rain {
0% {
background-image: url("matrix-pride.png");
}
5% {
background-image: url("matrix-stripes.png");
}
10% {
background-image: url("matrix-green.png");
}
15% {
background-image: url("matrix-pride.png");
}
20% {
background-image: url("matrix-stripes.png");
}
25% {
background-image: url("matrix-green.png");
}
30% {
background-image: url("matrix-pride.png");
}
35% {
background-image: url("matrix-stripes.png");
}
40% {
background-image: url("matrix-green.png");
}
45% {
background-image: url("matrix-pride.png");
}
50% {
background-image: url("matrix-stripes.png");
}
55% {
background-image: url("matrix-green.png");
}
60% {
background-image: url("matrix-pride.png");
}
65% {
background-image: url("matrix-stripes.png");
}
70% {
background-image: url("matrix-green.png");
}
75% {
background-image: url("matrix-pride.png");
}
80% {
background-image: url("matrix-stripes.png");
}
85% {
background-image: url("matrix-green.png");
}
90% {
background-image: url("matrix-pride.png");
}
95% {
background-image: url("matrix-stripes.png");
}
100% {
background-image: url("matrix-green.png");
}
}
#background {
position: fixed;
top: 0;
left: 0;
z-index: 1;
pointer-events: none;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
animation: matrix-rain 10s linear infinite;
}
#header {
font-family: fantasy;
color: white;
text-align: center;
font-size: 400%;
margin-top: 50px;
}
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
<title>Hello, world!</title>
</head>
<body>
<div id="background">
<h1 id="header">Pills</h1>
<center>
<a href="google.com"><img src="https://i.stack.imgur.com/D8d6J.png" style="width:35%;height:15%;"></a>
<a href="google.com"><img src="https://i.stack.imgur.com/wPa6r.png" style="width:40%;height:20%;"></a>
</center>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
我对您的目标有所猜测，但是您不需要居中对齐图像容器吗？我已在
#background选择器上执行了此操作。然后，我将调整大小的职责移至锚点，并将其显示属性设置为
inline-block。这迫使它们完全包含图像（请参阅为什么锚标记不采用其包含元素的高度和宽度）。我还将图像的最大宽度设置为 100%。这一切都是在 CSS 中完成的，因为内联样式效率低下并且应该避免。图像大小不等。您可以使用 CSS 以多种方式处理该问题，但最好的解决方法是调整它们的大小以匹配。我会将较大的尺寸缩小到与较小的尺寸相同。
仅供参考，您的样式元素位于 head 和 body 元素之外。这是无效的 HTML。将其放入 head 元素内。
此外，中心元素很长已弃用，不应使用。
body { margin: 0; overflow: hidden; } #content { position: relative; z-index: 2; padding: 20px; text-align: center; color: rgb(255, 255, 255); font-family: Arial, sans-serif; font-size: 24px; } @keyframes matrix-rain { 0% { background-image: url("matrix-pride.png"); } 5% { background-image: url("matrix-stripes.png"); } 10% { background-image: url("matrix-green.png"); } 15% { background-image: url("matrix-pride.png"); } 20% { background-image: url("matrix-stripes.png"); } 25% { background-image: url("matrix-green.png"); } 30% { background-image: url("matrix-pride.png"); } 35% { background-image: url("matrix-stripes.png"); } 40% { background-image: url("matrix-green.png"); } 45% { background-image: url("matrix-pride.png"); } 50% { background-image: url("matrix-stripes.png"); } 55% { background-image: url("matrix-green.png"); } 60% { background-image: url("matrix-pride.png"); } 65% { background-image: url("matrix-stripes.png"); } 70% { background-image: url("matrix-green.png"); } 75% { background-image: url("matrix-pride.png"); } 80% { background-image: url("matrix-stripes.png"); } 85% { background-image: url("matrix-green.png"); } 90% { background-image: url("matrix-pride.png"); } 95% { background-image: url("matrix-stripes.png"); } 100% { background-image: url("matrix-green.png"); } } #background { position: fixed; top: 0; left: 0; z-index: 1; pointer-events: none; width: 100%; height: 100%; background-size: cover; background-position: center; animation: matrix-rain 10s linear infinite; text-align: center; } #background a { display: inline-block; max-width: 40%; } #background a img { max-width: 100%; } #header { font-family: fantasy; /* color: white; */ text-align: center; font-size: 400%; margin-top: 50px; }<head> <!-- Required meta tags --> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" /> <title>Hello, world!</title> </head> <body> <div id="background"> <h1 id="header">Pills</h1> <a href="https://google.com"><img src="https://i.stack.imgur.com/D8d6J.png"></a> <a href="https://google.com"><img src="https://i.stack.imgur.com/wPa6r.png"></a> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </body>