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

时间:2018-04-17 23:16:24

标签: html css html5 css3 iframe

我的网站上有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>

2 个答案:

答案 0 :(得分:0)

<!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,额外},颜色而不是背景颜色,因此很可能无法正常工作。请尝试此操作,并在需要其他任何内容时发表评论:)< / p>

答案 1 :(得分:0)

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