<div class="container"> <div class="code"> <h2>我的项目</h2> <div class="input"> <textarea placeholder="print('hello world')" name="" id="" cols="60" rows="20"></textarea> </div> <div class="button"> <button>运行</button> <button>保存</button> </div> <div class="output"> <textarea placeholder="Python 3.9.5 [MSC v.1900 64 bit AMD64)] on win32 >>" name="" id="" cols="60" rows="20"></textarea> </div> </div> <div class="lib"> <div class="role"> </div> <div class="bgimg"> </div> </div> </div> 为这些元素添加样式，使得input和output的背景颜色是黑色，里面的字是白色，按钮颜色是灰色

可以使用以下 CSS 代码来实现所需的样式：

.container {
  display: flex;
}

.code {
  flex: 1;
  background-color: white;
  padding: 20px;
}

.input textarea, .output textarea {
  background-color: black;
  color: white;
  border: none;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}

.button button {
  background-color: gray;
  color: white;
  border: none;
  padding: 10px;
  margin-right: 10px;
}

.button button:hover {
  cursor: pointer;
}

.lib {
  flex: 1;
  background-color: white;
  padding: 20px;
}

.role {
  width: 100%;
  height: 50px;
  background-color: gray;
}

.bgimg {
  width: 100%;
  height: 200px;
  background-image: url('your-image-url');
  background-size: cover;
  background-position: center;
}

注意替换 `your-image-url` 为自己想要的背景图片链接。