Question

我有两个问题需要解决。首先，我希望有一个背景图像，我有一个YouTube视频，但它应该在中间，在中间垂直，看起来不错。第二，当我试图添加一个新的部分，即＆＃34; Banking＆＃34;在这个例子中，它添加了图像，但我想要的是在图像之后启动。我究竟做错了什么？

＆＃13;

    				.newsticker{
					height:50px;
					vertical-align:middle;
					background-color:#00642d;
					width:100%;
				}


				.master-head {
				  text-align: center;
				  color: white;
				  background-image: url("/images/header.jpg");
				  background-repeat: no-repeat;
				  background-attachment: scroll;
				  background-position: center center;
				  -webkit-background-size: cover;
				  -moz-background-size: cover;
				  -o-background-size: cover;
				  background-size: cover;
				  position: absolute;
					width: 100%;
					height: 100%;
					top: 0;
					z-index:-1;
				}

				.player{
					text-align: center;
				}

＆＃13;

                <!-- Background Image -->

				<div class="master-head">

				</div>

				<!-- News Ticker -->
				<div class="newsticker">
					News would go here.
				</div>


				<!-- Live Video -->
				<div class="container">
					<div class="player">
						<iframe width="560" height="315" src="https://www.youtube.com/embed/uilkmUoXoLU" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
					</div>
				</div>

				<!-- Banking Section -->
				<section>
					<div class="container">
						<h1>Banking</h1>
					</div>
				</section>

＆＃13;

Answer 1

试试这个

<div class="master-head">


<!-- News Ticker -->
<div class="newsticker">
    News would go here.
</div>


<!-- Live Video -->
<div class="container video-center-align">
    <div class="player">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/uilkmUoXoLU" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
    </div>
</div>

</div>

<!-- Banking Section -->
<section>
    <div class="container">
        <h1>Banking</h1>
    </div>
</section>



.newsticker{
    height:50px;
    vertical-align:middle;
    background-color:#00642d;
    width:100%;
}

.player{
    text-align: center;
}

.master-head
{
    position: relative;
    width: 100%;
    height: 100vh;
    float: left;
    text-align: center;
    color: white;
    background-image: url("/images/header.jpg");
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.video-center-align
{
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    display: -webkit-flex;
    -webkit-justify-content: center;
    -webkit-align-items: center;
    -webkit-flex-direction: column;
    text-align: center;
    margin:  0 auto;
    left: 0;
    right: 0;
    top: 0px;
    padding-top: 50px;
}
section
{
    width: 100%;
    float: left;
}

部分在背景图像上重叠

1 个答案: