当我使用视频作为正文背景视频时，我的其他内容背景不起作用

当我没有任何身体背景时，无论内容的背景是什么，它都是可见的。但是当我将视频设置为身体背景时，其他背景颜色变得不活动。就像我看不到 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. &nbsp; &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>

试试这个方式：

#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. &nbsp; &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>

我只是将重复类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. &nbsp; &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>

相关内容

最新更新

热门标签：