html - 如何在页眉中移动图像？

Question

标题屏幕:

我想将它移高并向左移动一点，但变换选项移动了整个 block 。我该如何处理？

CSS

.header {

    height: 100vh;
    width: 96%;
    background-size: cover;
    background-position: top;
    position: relative;
    display: inline-block;
    text-align: center;
    margin-top: 2rem;
    margin-left: 2rem;

    &__background {
        background-image: linear-gradient(
            to right bottom,
            rgba($color-main-green, 0.3),
            rgba($color-main-purple, 0.5)),
            url(../resources/img-cropped/header.jpg);



    }

   }

Answer 1

使用background-position 属性移动背景图像。可以使用 background-position: top left 如果这不符合预期的结果，您还可以添加 px 值而不是 top、left、right 和 bottom。

尝试进行实验，直到获得预期的结果。

例如:这段代码将使图像位于距左侧 30px 的位置:

background-position: left 30px center;

中心是图像的 y 值。您还可以将 px 值添加到这个值。