Question

我一直在努力研究如何让最顶层的图像像这个旋转木马上的文字一样调整到中心。

http://nasfactor.com/themes/dotsquare/html/html/index.html

我有3张图片。一个将是基础，第二个是在该基础之上的模式，第三个是我需要在视图大小改变时重新调整的标识（例如移动）。这是我目前所拥有的一个小提琴

#header
        {
            position: relative;
            display: inline;
        }
.overlay-logo
        {

            background-image: url('http://i.imgur.com/T3UwueF.png');
            background-repeat: no-repeat;
            z-index:2;

            position: absolute;
            width:100%;
            height:100%;
            top:50%;
            left:40%;
        }
        .overlay-pattern
        {
            background-image: url('http://i.imgur.com/XYwZohg.png');
            background-repeat: repeat;

            z-index:1;
            opacity:0.8;
            position: absolute;
            width:100%;
            height:400px;
            top:0;
            left:0;
        }
        #header-banner {
            color:#F0626A;
            background: url('http://i.imgur.com/u7yvl8I.jpg') no-repeat center center;
            height: 400px;

            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            padding: 150px 0 0 400px;

            /*position:relative;
            display: inline;
            background-size: cover;*/
        }

https://jsfiddle.net/f4hd3pt6/

最后，每当我重新调整浏览器时，底部会出现一个滚动条。我想知道我是否在节标签上做错了。

感谢任何帮助！

Answer 1

可能会帮助你。

<强> HTML：

<section class="header">
        <div id="header-banner">
            <div class="container overlay-pattern">
                <div class="overlay-logo"></div>
            </div>
        </div>
    </section>

<强> CSS：

#header {
  position: relative;
}
.overlay-logo {
  background-image: url('http://i.imgur.com/T3UwueF.png');
  background-repeat: no-repeat;
  background-position: center center;
  height:100%;
  width: 100vw;
  position: absolute;
  top:40%;
}
.overlay-pattern {
  background-image: url('http://i.imgur.com/XYwZohg.png');
  background-repeat: repeat;
  background-position: center center;
  z-index:1;
  opacity:0.8;
  position: absolute;
  width:100%;
  height:400px;
  top:0;
  left:0;
}
#header-banner {
  color:#F0626A;
  background: url('http://i.imgur.com/u7yvl8I.jpg') no-repeat center center;
  height: 400px;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}

Demo

如何在堆叠多个图像调整浏览器大小时将顶部图像调整为中心

1 个答案: