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

时间：2019-04-24 08:54:26

标签： html css html5-video background-color

当我没有身体的任何背景，而不是内容的背景时，它都是可见的。但是，当我将视频设置为主体背景时，其他背景颜色将变为无效。就像我看不到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>

2 个答案:

答案 0 :(得分：0)

尝试这种方式：

#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>

答案 1 :(得分：0)

我刚刚将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>

相关问题
最新问题