CSS居中背景图片

Question

我正在构建一个带有背景图像的项目，但我无法像这样将图像完全居中

我的目标是

我设法做的是

您可以看到图像没有完全垂直居中，如果我调整屏幕大小，铅笔往往会消失。

Here 是有问题的图像。

这里是 CSS 代码：

    .app {
        height: 100%;
        background: url('./background.jpg') no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }

感谢任何可以帮助我的人。

.app {
  height: 100%;
  background: url('https://laaouatni.github.io/w11-clone/images/1dark.jpg') no-repeat center center fixed;
  background-size: cover;
}

<!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>
  <link rel="stylesheet" href="style.css">
</head>

<body class="app">
</body>

</html>

Answer 1

尝试使用background-position-y 属性

其实你的背景是居中的，但是图片中的笔没有居中

添加一些代码

所以你可以减少background-position-y 中的数字，比如-10em 在我的电脑上看起来不错

position-y 类似于 translateY 但用于背景（用于垂直移动背景）

或（用更少的代码）

或者为了获得良好的效果，使用 PHOTOSHOP 并裁剪顶部的空间，使图像居中，然后将其放入 HTML

我知道不是最好的，但如果你想要更少的代码¯_(ツ)_/¯ 反应灵敏

.app {
    height: 100%;
    background-image: url('https://i.ibb.co/pWsFM5S/background.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    background-position-y: -10em;
}

<!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>
    <link rel="stylesheet" href="style.css">
</head>

<body class="app">
</body>

</html>