如何使标题透明? [英] How to make the header transparent?
本文介绍了如何使标题透明?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我花了很多时间来解决这个问题，但仍然不明白我在做什么错.我需要我的标题是透明的，没有背景.例如:
I spent a lot of time solving this problem and still don't understand what I am doing wrong. I need my header to be transparent with no background. As an example:
但是我不知道透明度是如何工作的，我已经尽力了，但是它始终是白色的，并且透明度仅适用于文本.帮助，我真的很期待.
But I don't understand how transparency works, I've tried everything I can, but it's always white and transparency only applies to text. Help, I'm really looking forward to it.
body {
margin: 0;
font-family: Roboto, sans-serif;
}
.section {
padding: 0 100px;
height: 100vh;
display: flex;
align-items: center;
}
.box {
position: relative;
max-width: 200px;
padding: 40px;
background: rgba(255, 255, 255, .2);
}
.intro {
max-height: 100vh;
overflow: hidden;
position: relative;
background: url("cover.jpg") center no-repeat;
background-size: cover;
}
.intro:after {
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
.intro__content {
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 3;
}
.intro__title {
margin: 0;
font-size: 72px;
color: #fff;
text-align: center;
line-height: 84px;
font-style: normal;
font-weight: normal;
}
.i_title {
margin: 0;
font-size: 24px;
color: #fff;
text-align: center;
line-height: 35px;
font-style: normal;
font-weight: normal;
}
}
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.video {
position: relative;
z-index: 1;
padding-bottom: 56.25%;
zoom: 0.4;
}
.video__media {
width: 100%;
height: auto;
position: absolute;
top: 0;
left: 0;
}<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
<section>
<div class="box">
<p>Here is some more content of the header...</p>
</div>
</section>
<div class="intro">
<div class="video">
<video class="video__media" src="media/video.mp4" autoplay muted loop></video>
</div>
<div class="intro__content">
<div class="container">
<h1 class="intro__title">None</h1>
<h1 class="i_title">None</h1>
</div>
</div>
</div>推荐答案
我将视频设置为
.video__media {
position: fixed;
top: 0;
}
body {
margin: 0;
font-family: Roboto, sans-serif;
}
.section {
padding: 0 100px;
height: 100vh;
display: flex;
align-items: center;
}
.box {
position: relative;
max-width: 200px;
padding: 40px;
background: rgba(255, 255, 255, .2);
color: #fff;
z-index: 5;
}
.intro {
max-height: 100vh;
overflow: hidden;
position: relative;
background: url("cover.jpg") center no-repeat;
background-size: cover;
}
.intro:after {
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
.intro__content {
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 3;
}
.intro__title {
margin: 0;
font-size: 72px;
color: #fff;
text-align: center;
line-height: 84px;
font-style: normal;
font-weight: normal;
}
.i_title {
margin: 0;
font-size: 24px;
color: #fff;
text-align: center;
line-height: 35px;
font-style: normal;
font-weight: normal;
}
}
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.video {
z-index: -1;
padding-bottom: 56.25%;
zoom: 0.4;
}
.video__media {
width: 100%;
height: auto;
position: fixed;
top: 0;
}<body>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
<section>
<div class="box">
<p>Here is some more content of the header...</p>
</div>
</section>
<div class="intro">
<div class="video">
<video class="video__media" src="https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4" autoplay muted loop></video>
</div>
<div class="intro__content">
<div class="container">
<h1 class="intro__title">None</h1>
<h1 class="i_title">None</h1>
</div>
</div>
</div>
</body>
</html>这篇关于如何使标题透明?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
