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 并裁剪顶部的 space，使图像居中，然后将其放入 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>

CSS 居中背景图片

CSS centering background image

html

javascript

css

user-interface

sass

我的目标是

我设法做到的是

尝试使用 `background-position-y` 属性

添加一些代码

或（代码较少）

CSS 居中背景图片

CSS centering background image

html

javascript

css

user-interface

sass

我的目标是

我设法做到的是

尝试使用 background-position-y 属性

添加一些代码

或（代码较少）

尝试使用 `background-position-y` 属性