页面含视频及SoundCloud链接时如何修改body背景色

1. 如何修改包含视频的页面中body的背景色？ #

其实这个操作和普通页面没什么区别，直接在CSS的body选择器里添加background-color属性就可以啦～不管页面里有没有视频，body的背景色都是最底层的样式，只要没有其他元素设置了全屏的背景覆盖它，就能正常生效。

举个例子，如果你想把背景改成浅灰色，CSS可以这么写：

body {
  color: black;
  background-color: #f5f5f5; /* 这里可以换成你需要的颜色值，比如rgb(240,240,240)或者直接写颜色名like 'lightblue' */
}

如果遇到视频播放器的样式好像“盖住”了背景，那你可以检查下视频的容器有没有设置背景色，要是有的话，把容器的背景改成透明（background-color: transparent）就行。

2. 关于添加SoundCloud链接后无法修改body背景色的问题 #

先看了你贴的代码，发现两个关键问题：

• 你的body选择器里根本没加background-color属性，所以自然看不到背景色变化啦；
• CSS代码里有个语法错误：.right选择器的规则最后多了一个额外的}，这会导致浏览器解析CSS时出错，可能影响整个样式表的生效。

给你修正后的完整代码示例：

<!DOCTYPE html>
<html>
<head>
  <title> Music</title>
  <style type="text/css">
    body {
      color: black;
      background-color: #e0e0e0; /* 这里设置你想要的背景色 */
    }
    #img {
      float: none; /* 注意：float属性没有under这个值，你可能是想写left/right/none？ */
    }
    #img2 {
      margin: 0 auto; /* float没有center值，块级元素居中可以用这个写法 */
      display: block;
    }
    .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">
    <!-- 你的内容和SoundCloud链接/嵌入代码放在这里 -->
  </div>
</body>
</html>

另外还要提醒你：float属性没有under和center这两个取值哦，如果你想让元素居中，对于块级元素可以用margin: 0 auto + display: block的组合，或者用flex布局来实现，这个小问题也顺便给你指出来啦～

如果添加SoundCloud嵌入代码后还是有问题，那你可以检查下SoundCloud的嵌入iframe有没有设置背景，给它加上style="background-color: transparent;"就能让body的背景透出来了。

内容的提问来源于stack exchange，提问作者Mohamed Ali