多层背景颜色与图层？

时间：2018-01-27 19:45:37

标签： html css

我被客户端发送了一些图片艺术，我被要求在CSS中重新编码，我已经创建了大部分内容，但我正在努力研究如何为div着色，就像实际的例子一样，这里是客户的版本。

这是我的版本：

body {
  background-color: black;
}

.loading_bar {
  border: 1px solid white;
  width: 400px;
  height: 26px;
  border-radius: 3px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 80px;
}
<div class="loading_bar">
</div>

2 个答案:

答案 0 :(得分：2)

您只需使用linear-gradient并调整background-size即可控制进度而无需添加额外标记：

＆＃13;
＆＃13; 
body {
  background-color: black;
}

.loading_bar {
  border: 1px solid white;
  width: 400px;
  height: 26px;
  border-radius: 3px;
  margin:10px auto;
  background-image: linear-gradient(to bottom, #bacad3 50%, #8ca1ad 0%);
  background-size: calc(100% - 4px) calc(100% - 4px);
  background-position: 2px 2px;
  background-repeat: no-repeat;
}
＆＃13; 
<div class="loading_bar">
</div>

<div class="loading_bar" style="background-size: 10% calc(100% - 4px);">
</div>

<div class="loading_bar" style="background-size: 60% calc(100% - 4px);">
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

我建议将另一个div插入加载栏的中间，然后设置样式，并在栏中添加一些填充。为了获得所需的“双色调”效果，您可以使用一个边高一个边的边框作为元素本身。

这是一个简单的例子：

loadData() {
  this._fbService.listAll('').subscribe(data => {
   console.log('Data returned', data);
  });
}

body {
  background-color: black;
}

.loading_bar {
  border: 1px solid white;
  width: 400px;
  height: 26px;
  border-radius: 3px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 180px;
  padding: 2px;
}

.loading-bar-center {
  width: 50%;
  background: white;
  height: 13px;
  border-bottom: 13px solid lightblue; 
}

您可以根据需要更改颜色，只需更改<html> <head> </head> <body> <div class="loading_bar"> <div class="loading-bar-center"></div> </div> </body> </html>元素的宽度％即可为该栏设置动画。

相关问题
最新问题