Блог

Главная - Вопросы по программированию - Мой другой фон содержимого не работает, когда я использую видео в качестве основного фона видео

Мой другой фон содержимого не работает, когда я использую видео в качестве основного фона видео

#html #css #html5-video #background-color

#HTML #css #html5-видео #цвет фона #html5-video

Вопрос:

Когда у меня нет фона тела, кроме фона содержимого, он виден. Но когда я устанавливаю видео в качестве основного фона, другой цвет фона становится неактивным. Например, я не могу видеть, какой вообще контент написан в теге H2. Также не работает стилизация класса .row. Это сработает, если я удалю видео в качестве фона.

     <html>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <style>
    #myVideo {
        position: fixed;
        right: 0;
        bottom: 0;
        min-width: 100%; 
        min-height: 100%;
    }   
    h2{
        background: #d1ff9b;
        margin-top: 10px;
        border: 2px solid #468201;
        padding: 15px; 
        border-radius:20px;
        text-align: center;
        font-weight: bold
    }
    .row{
        border: 2px solid #468201;
        background-color: #d1ff9b !important;
        margin: 20px;
        border-radius:20px;
        box-shadow:5px 5px 5px #468201;
        padding: 20px;
        font-weight:bold;
        font-size: 22px
    }
    .block{
        display: block;
        width:100%;
        border: none;
        margin-top: 20px;
        border-radius:20px;
        background: #569E00;
        color:white;            
        box-shadow:2px 2px 1px #468201;
        font-family: roboto;
        padding: 14px 28px;
        font-size: 20px;
        cursor: pointer;
        text-align: left
    }
    </style>
</head>
<body>
<video autoplay muted loop id="myVideo">
  <source src="img/1.webm" type="video/webm">
</video>
<h2>Read the statements carefully and click on the correct option.</h2>
    <div class="container tab1">
        <div class="row">
            <div class="col-sm-12" style="padding:10px;"> 1. amp;nbsp; amp;nbsp; Lightning is caused when</div>
            <div class="col-lg-3 col-md-6 col-sm-12">
                <button class="block" onclick="wrong(1)" id="wrong1">(a)    Two clouds of similar charge rub against each other</button>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-12">
                <button class="block" onclick="wrong(2)" id="wrong2">(b)    Two clouds of dissimilar charge rub against each other</button>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-12">
                <button class="block" onclick="wrong(3)" id="wrong3">(c)    There is electric discharge between two clouds</button>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-12">
                <button class="block" onclick="correct(1)" id="correct1">(d)    Both (a) and (c) are correct </button>
            </div>
        </div>
    </div>
</body>
</html>

Комментарии:

1. где ваш код?

2. Задайте свой вопрос с вашим примером кода……

3. вы хотите установить цвет фона для body с видео?

4. @Saravana Нет, я хочу установить основной фон в качестве видео. И если у меня есть какой-либо контент на моей странице, я хочу задать для фона этого контента определенный цвет.

5. ваш код корректно работает на моем экране. Я вижу зеленый фон для всего содержимого

Ответ №1:

Попробуйте этот способ: 

 #myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
}

h2 {
  margin-top: 10px;
  border: 2px solid #468201;
  padding: 15px;
  border-radius: 20px;
  text-align: center;
  font-weight: bold;
}

.roww {
  border: 2px solid #468201;
  background-color: #d1ff9b !important;
  margin: 20px;
  border-radius: 20px;
  box-shadow: 5px 5px 5px #468201;
  padding: 20px;
  font-weight: bold;
  font-size: 22px;
}

.block {
  display: block;
  width: 100%;
  border: none;
  margin-top: 20px;
  border-radius: 20px;
  background: #569E00;
  color: white;
  box-shadow: 2px 2px 1px #468201;
  font-family: roboto;
  padding: 14px 28px;
  font-size: 20px;
  cursor: pointer;
  text-align: left;
}  
     <html>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
 
</head>
<body>
<video autoplay muted loop id="myVideo">
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>

    <div class="container tab1">
    <div class="row">
     <div class="col-sm-12"> 
     <div class="roww">
       <h2>Read the statements carefully and click on the correct option.</h2>
     </div>
     </div>
      
    </div>
        <div class="row">
            <div class="col-sm-12" style="padding:10px;"> 1. amp;nbsp; amp;nbsp; Lightning is caused when</div>
            <div class="col-lg-3 col-md-6 col-sm-12">
                <button class="block" onclick="wrong(1)" id="wrong1">(a)    Two clouds of similar charge rub against each other</button>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-12">
                <button class="block" onclick="wrong(2)" id="wrong2">(b)    Two clouds of dissimilar charge rub against each other</button>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-12">
                <button class="block" onclick="wrong(3)" id="wrong3">(c)    There is electric discharge between two clouds</button>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-12">
                <button class="block" onclick="correct(1)" id="correct1">(d)    Both (a) and (c) are correct </button>
            </div>
        </div>
    </div>
</body>
</html>

Комментарии:

1. если вы запустите, вы увидите, что стиль, который я сделал для класса строк, не работает.

2. @TabishTanseef я отредактировал свой пост, ваша проблема в том, что ваше имя класса конфликтует с классами начальной загрузки

3. @TabishTanseef какой раздел этого не работает?

4. раздел, содержащий вопрос. его фон не загружается.

Ответ №2:

Я только что изменил background-color повторяющийся класс на .row.bg-load .

Теперь вы можете просмотреть свою альтернативу background-color .

 * {
    box-sizing: border-box;
    position: relative;
}

.row.bg-load {
    background-color: #f8f9fa;
    margin-top: 20px;
}

.col {
    border: solid 1px #6c757d;
    padding: 10px;
}

.card {
    border: 0;
    border-top: 1px solid #ddd;
    border-radius: 0;
}

#myVideo {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
}

h2 {
    background: #d1ff9b;
    margin-top: 10px;
    border: 2px solid #468201;
    padding: 15px;
    border-radius: 20px;
    text-align: center;
    font-weight: bold
}

.row {
    border: 2px solid #468201;
    background-color: #d1ff9b;
    margin: 20px;
    border-radius: 20px;
    box-shadow: 5px 5px 5px #468201;
    padding: 20px;
    font-weight: bold;
    font-size: 22px
}

.block {
    display: block;
    width: 100%;
    border: none;
    margin-top: 20px;
    border-radius: 20px;
    background: #569E00;
    color: white;
    box-shadow: 2px 2px 1px #468201;
    font-family: roboto;
    padding: 14px 28px;
    font-size: 20px;
    cursor: pointer;
    text-align: left
}  
 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>


   
<video controls autoplay id="myVideo"> 
  <source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm> 
  <source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg> 
  <source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
  <source src=http://techslides.com/demos/sample-videos/small.3gp type=video/3gp>
</video>

<h2>Read the statements carefully and click on the correct option.</h2>
<div class="container tab1">
    <div class="row bg-load">
        <div class="col-sm-12" style="padding:10px;"> 1. amp;nbsp; amp;nbsp; Lightning is caused when</div>
        <div class="col-lg-3 col-md-6 col-sm-12">
            <button class="block" onclick="wrong(1)" id="wrong1">(a) Two clouds of similar charge rub against each other</button>
        </div>
        <div class="col-lg-3 col-md-6 col-sm-12">
            <button class="block" onclick="wrong(2)" id="wrong2">(b) Two clouds of dissimilar charge rub against each other</button>
        </div>
        <div class="col-lg-3 col-md-6 col-sm-12">
            <button class="block" onclick="wrong(3)" id="wrong3">(c) There is electric discharge between two clouds</button>
        </div>
        <div class="col-lg-3 col-md-6 col-sm-12">
            <button class="block" onclick="correct(1)" id="correct1">(d) Both (a) and (c) are correct </button>
        </div>
    </div>
</div>