CSS：在div顶部作为背景的中心图像

Question

我不知道为什么这张图片不会居中。我需要将其居中放置在确切的中心，并且如果调整屏幕大小（我使用的是引导程序4），这应该可以正常工作。

html：

<div id="general-container" class="general-container preloader">

        <img src="">
</div>

css：

    .preloader {

    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    transition: 1s;
    z-index: 9999;
    opacity: .8;
}

#general-container {
    background-image: url("/static/img/logo.png");
    background-repeat: no-repeat;
    display: block;
    margin-left: auto;
    margin-right: auto;
    position: absolute;

}

项目结构：

-llama-stickers
 |_cart
   |_templates
     |_cart.html
 |_llama-stickers
 |_order
 |_search_app
 |_shop
   |_templates
     |_base.html
 |_static
   |_css
     |_preloader.css
   |_img
     |_logo.png

Answer 1

假设您希望此控件垂直和水平居中，请尝试一下-https://jsfiddle.net/4c6n9bjq/1/

进行了一些代码更改，并使用了图片作为示例

HTML

<div id="general-container" class="preloader">
   <div class="photo-bg">


   </div>
</div>

CSS

 .preloader {
   position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
   background: #000;
   transition: 1s;
   opacity: .8;
 }

 .photo-bg {
   background-image: url("http://people.cs.ksu.edu/~xou/argus/img/profile/placeholder.png");
   background-repeat: no-repeat;
   display: block;
   width: 250px;
   height: 250px;
   top: 40vh;
   left: 40vw;
   position: absolute;
 }

关键是要根据图像尺寸为图像div分配必要的vh和vw值。正确设置后，图像将在整个屏幕尺寸上适当缩放。

Answer 2

我上了.general-container类，因为您似乎不需要它。另外，您不应具有与ID相同名称的类。请尝试以下代码：

.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    transition: 1s;
    z-index: 9999;
    opacity: .8;
}

#general-container {
    background: #000 url("https://arviem.com/wordpress/wp-content/uploads/2018/07/logo.ico") center no-repeat;
}

<div id="general-container" class="preloader"></div>