Вопросы Теги

Нужно добавить видео на мою top-обертку, пожалуйста, научите меня, как стиль CSS

Я исправил это, выполнив:

CMD:

netsh http add iplisten ipaddress = 192.168.xxx.xxx

, затем управление + c существует, затем iisreset

0
задан Takashi 25 March 2019 в 01:22
поделиться

2 ответа

См. Описание Mozilla с примером: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video

0
ответ дан Anno 25 March 2019 в 01:22
поделиться

В своем коде добавьте абсолютное позиционирование контейнера, чтобы наложить контент. Во-вторых, добавьте прозрачный цвет фона :before для класса top-wrapper. А также я отрегулировал отступы, основываясь на высоте заголовка. 

body {
    margin: 0;
    font-family: "Hiragino Kaku Gothic ProN";
}

* {
    box-sizing: border-box;
}

a {
    text-decoration: none;
}

.mt-50 {
    margin-top: 50px;
}

.container {
    max-width: 1170px;
    width: 110%;
    padding: 0 15px;
    margin: 0 auto;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    color: #fff;
    z-index: 1;
}

.top-wrapper:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 1;
    background: rgba(255, 0, 0, 0.1);
}

.top-wrapper {
    padding: 65px 0 0px 0;
    text-align: center;
    position: relative;
}

.top-wrapper h1 {
    font-size: 75px;
    letter-spacing: 5px;
    padding-top: 5px;
    color: white;
    text-align: center;
}

.top-wrapper p {
    font-size: 25px;
    color: white;
    text-align: center;
}

header {
    height: 65px;
    width: 100%;
    background-color: rgba(34, 49, 52, 0.9);
    top: 0;
    position: fixed;
    z-index: 10;
}
<header>
    <div class="container">
        <div class="header-left">
        </div>
        <div class="header-right">
            <a href="file:///Users/takashikaida/Documents/Takashi%20Kaida%20Personal/index.html">Home</a>
            <a href="#" class="about">About</a>
            <a href="#" class="blog">Blog</a>
            <a href="#" class="cv">CV</a>
        </div>
    </div>
</header>
<div class="top-wrapper">
    <video autoplay loop width="100%">
        <source src="https://www.w3schools.com/howto/rain.mp4" type="video/mp4" /> Your browser does not support the video tag. We suggest you upgrade your browser.
    </video>
    <div class="container">
        <h1>HELLO, IT'S ME.</h1>
        <h1>I AM TAKASHI</h1>
        <p class="mt-50">Marketing Analyst/Assistant</p>
        <p>Co-Founder and CEO of
            <a href="file:///Users/takashikaida/Desktop/Flow%20Full%20Screen%20Type/index.html" target="_blank"> <strong>FLOW</strong></a>
        </p>
    </div>
</div>

0
ответ дан Saravana 25 March 2019 в 01:22
поделиться