如何将图像设置为背景大小：封面与Windows窗口大小增大和减小配合

Question

我是一名初学者 javascript 开发人员，我正在开发一个数字时钟程序，但我希望它看起来更有趣，所以我使用老式时钟的 AI 工具生成了这个背景图像，并且我制作了它，以便覆盖实际的时钟元素在图像上，所以它看起来像一个 3D 时钟。

正如您在我的代码中看到的，背景图像设置为“覆盖”以适合窗口大小，我将其设置为时钟正好位于中间，以避免在调整窗口大小时时钟元素移动的问题。但是，现在我遇到了一个问题，因为每当我调整窗口大小时，当背景图像保持不变时，时钟元素的大小都会增加和减小。我怎样才能使背景图像以某种方式覆盖窗口，但也能逻辑地放大和缩小以适应时钟元素？

这是我的代码：

body, html {
    overflow: hidden;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Orbitron', sans-serif; 
}
.mainDiv{
    background-image: url(terabedzie.png);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-attachment: fixed;
    background-size: cover;
    height: 100vh;
    margin: 0;
    padding: 0;
}

#grainEffect {
    content: "";
    position: fixed;
    width: 200%;
    height: 200%;
    left: -50%;
    top: -50%; 
    background-image: url(Png333.png);
    z-index: 1;
    pointer-events: none;
    animation: grain 1.5s steps(6) infinite;
}

@keyframes grain {
    0%, 100% {transform: translate(0,0);}
    10% {transform: translate(-10%,5%);}
    30% {transform: translate(11%,-8%);}
    50% {transform: translate(-2%,15%);}
    70% {transform: translate(9%,7%);}
    90% {transform: translate(-14%,17%);}
}



.clock{
    width: 400px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgb(31, 30, 30);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    perspective: 1000px;
    pointer-events: none;

 }

.clock span{
    font-size: 70px;
    transform: scaleY(2) rotateY(-17deg) rotateZ(2.7deg) rotateX(-16deg);
    text-shadow: 0px 0px 1.7px black;
    width: 200px;
    text-align: center;
    position: absolute;
    pointer-events: none;
}

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Digital clock</title>

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Orbitron&display=swap" rel="stylesheet">

</head>
<body>
    <div class="mainDiv">
      <div id="grainEffect">
        <img id="grainImage" src="grainn22.png" alt="">
      </div>
      <div class="clock">
       <span>20:00:00</span>  
      </div>
    </div>
    <script src="digitalClock.js"></script>
</body>

感谢您的帮助！

我尝试将背景图像作为伪元素分配给时钟元素，但它不起作用，基于对问题的其他一些回答，我还尝试将图像附加为html中的元素以及css中的背景图像，但仍然一样的。

Answer 1

当我将您的代码片段作为整页运行并调整窗口大小时，数字保持恒定大小。如果这就是您想要的，为了让数字保持恒定大小，那么您需要背景也保持恒定大小。使用

background-size: 1000px

或任何使图像相对于您的数字具有正确大小的值。您已经有了

background-position: center

，因此您的图像将在边缘裁剪，我认为这就是您想要的。

但是，如果您真正想要的是数字与窗口宽度成比例缩放，则在指定

vw

时需要使用

font-size

单位。

如何将图像设置为背景大小：封面与Windows窗口大小增大和减小配合

问题描述投票：0回答：1

1个回答

最新问题

如何将图像设置为背景大小：封面与Windows窗口大小增大和减小配合

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1