Question

我的问题很简单。我有这个页面：http://vacanor.com/tests/lared

第一部分中间有一个浮在屏幕上的图像。每当我改变屏幕尺寸时，我想在第一部分中保留该图像以保持其位置。我尝试了一切，但我做不到。

以下是关于困扰我的内容的视频：https://www.youtube.com/watch?v=U37_1cY8nAs

我的HTML（包括第二部分）：

<div class="container-a">
    <!--<div class="col-lg-12">-->
        <div class="img-cover">
            <center><img class="img-cover-i floating" src="img/logo-background.png" alt="Logo">
            </center>
        </div>
    </div>
<!--</div>-->
<!-- Presentación -->
<div class="container-b">
   <!-- <div class="col-lg-12">-->
        <div class="ani">
            <div class="intro">
                <h1 class="animated fadeInDown animated-d-1 cd-headline slide">
                    Bienvenido a La Red
                <small>
                    <span class="text-primary cd-words-wrapper"       style="width: 207px;">
                        <b class="is-hidden">Construir </b>
                        <b class="is-hidden">Jugar</b>
                        <b class="is-hidden">Sobrevivir</b>
                        <b class="is-visible">Divertir-se </b>
                    </span>
                    <span>nunca será lo mismo.</span>
                </small>
                </h1>
            </div>
        </div>
    </div>

我的css：

.img-cover {
margin: 0 auto;
width: 95%;
position: relative;
z-index: 10;
margin-top: 50px;
}
.img-cover-i {
position: relative;
}
.container-a {
margin: 0 auto;
width: 100%;
height: 100%;
position: absolute;
top: 0;
z-index: -2;
background-image: url('../img/cover-background.jpg');
background-position: center;
background-repeat: none;
background-size: cover;
}
.container-b {
margin: 0 auto;
position: absolute;
width: 100%;
height: 100%;
z-index: -3;
top:100%;
}

Answer 1

我真的不明白你的问题，所以这里有3个修正我的理解。

.container-a {
margin: 0 auto;
width: 100%;
height: 100%;
position: absolute;
top: 0;
z-index: -2;
background-image: url('../img/cover-background.jpg');
background-position: center;
background-repeat: none;
background-size: cover;
overflow:hidden;
}

上面的代码应该会在调整屏幕大小时使图像不会脱离div，下面是如何相应调整图像大小的示例;

.img-cover-i {
position: relative;
height:calc(100% - 50px)
}

此外，如果您希望您的徽标在屏幕上方但在集装箱a外不可见，请使用以下代码：

.img-cover-i {
margin-left:calc(50% - 237px);
position: fixed;
}
.container-a {
margin: 0 auto;
width: 100%;
height: 100%;
position: absolute;
top: 0;
z-index: -2;
background-image: url('../img/cover-background.jpg');
background-position: center;
background-repeat: none;
background-size: cover;
overflow:hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}

此外，如果使用此代码，请删除包装html部分中的img。我希望这会有所帮助。

将图像修复为全屏div

1 个答案: