如何使用页面上的视频更改正文的背景颜色答案

【问题标题】：How to change background color of body with videos on the page如何使用页面上的视频更改正文的背景颜色
【发布时间】：2018-04-18 14:19:59
【问题描述】：

我的网站上有我的 SoundCloud 链接，但我无法更改背景颜色。我的代码如下：

<!DOCTYPE html>
<html>
<head>
    <title> Music</title>

<style type="text/css">

body {
    color:black;
}

#img {
    float: under;
}

#img2 {
    float: center;
}

.right {
    /*  border: 3px solid black;*/
    margin-top: 20px;
    padding: 50px 50px; 
    width: 500px;
    border-radius: 30px;
    margin: auto;
    position: relative;
}
}
</style>
</head>
<body>

<div class = "right">
    <p> <h2>These are some of the songs that I listen to on the daily!</h2></p>
</div>

<div id = "img">
    <iframe width="400" height="300" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/97939459&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe></div>

<div id = "img2">
    <iframe width="400" height="300" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/142830556&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe>
</div>

<iframe width="400" height="300" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/396615804&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe>


<p><a href="index.html"> Link back to Home Page!</a></p>    

</body>
</html>

【问题讨论】：

<h2> 在 <p> 标记内无效，并且您的 CSS 末尾还有一个额外的 }。您实际上并没有在任何地方设置背景颜色。您是在谈论您在body 上设置的color 吗？设置 text 颜色；你想要 background-color 作为背景。

标签： html css iframe

【解决方案1】：

<!DOCTYPE html>
<html>

<head>
  <title> Music</title>

  <style>
    body {
      background-color: black;
    }
    
    #img {
      vertical-align: bottom;
    }
    
    #img2 {
      float: center;
    }
    
    h2 {
      color: white;
    }
    
    .right {
      /*  border: 3px solid black;*/
      margin-top: 20px;
      padding: 50px 50px;
      width: 500px;
      border-radius: 30px;
      margin: auto;
      position: relative;
    }
  </style>


</head>

<body>

  <div class="right">
    <h2>These are some of the songs that I listen to on the daily!</h2>
  </div>

</body>

</html>

它很可能无法正常工作，因为您有代码错误（段落中不允许使用 h2，额外的 }，颜色而不是背景色。试试这个，如果您需要其他任何内容，请发表评论:)

【讨论】：

【解决方案2】：

<!DOCTYPE html>
<html>
  <head>
    <title> Music</title>

    <style type="text/css">

      body{
        background: black; /*this sets the background color to black*/
      }

      #img{
        float: under;
      }

      #img2{
        float: center;
      }


      .right {
         /*  border: 3px solid black;*/
         margin-top: 20px;
         padding: 50px 50px; 
         width: 500px;
         border-radius: 30px;
         margin: auto;
         position: relative;
      }


  </style>
</head>
<body>
<!-- the p tags are taken out because you dont need them if you have a h2 tag -->
<div class = "right"><h2>These are some of the songs that I listen to on the daily!</h2>

【讨论】：