如何用 CSS 创建这个 Material Design 背景（见下图）？

Question

有没有办法用 CSS 创建这样的背景？

我试过这个：

<div style="background: linear-gradient(to bottom, #3F51B5 50%, #FAFAFA 50%);">

Answer 1

根据你所说的，我认为你或许应该试试：

body { background-image: url(http://material-design.storage.googleapis.com/publish/v_2/material_ext_publish/0Bx4BSt6jniD7RHJsbFhpanhPQXc/layout_structure_regions_guidance5.png);
       background-repeat: no-repeat;
       background-size: 100% 100%;}

修改背景大小值以适合您的需要。

如果能把你的问题说清楚一点，再细化一下你想做什么就更好了。

Answer 2

CSS 可以通过多种方式实现这一目标。请参阅下面的示例并根据需要进行调整。

* {
  margin: 0 auto;
  }

#color-bar {
  width: 100%;
  height: 150px;
  background-color: rgb(63,81,181);
  position: absolute;
  z-index: -2;
  top: 0;
  }

#nav-bar {
  height: 30px;
  width: 100%;
  background-color: rgb(48,63,159);
  }

#content {
  width: 50%;
  height: 400px;
  background-color: #ddd;
  z-index: 3;
  margin-top: 80px;
  box-shadow: 1px 1px 1px 1px #ccc;
  
  }

<div id="color-bar">
<div id="nav-bar"></div><!-- End Nav Bar -->


</div><!-- End color Bar -->

<div id="content"></div><!-- End Nav content -->

Answer 3

检查这个：

* {
            margin: 0;
            padding: 0;
        }

        .top-line-section {
            height: 32px;
            background: darkred;
        }

        .header-bar-section {
            height: 230px;
            background: red;
        }

        .content-section {
            width: 1280px;
            height: auto;
            margin: -150px auto -140px auto;
            position: relative;
            z-index: 7;
            padding: 0 20px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }

        .content {
            background: white;
            box-shadow: 0.5px 0.866px 5px 0 rgba(0, 0, 0, 0.11);
            padding: 12px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }

        .footer-section {
            height: 200px;
            background: red;
            position: relative;
            z-index: 6;
        }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="top-line-section"></div>
<div class="header-bar-section"></div>
<div class="content-section">
    <div class="content">
        content <br>content <br>content <br>content <br>content <br>content <br>content <br>content <br>content <br>content <br>content <br>content <br>content <br>content <br>content <br>content <br>content <br>content <br>content <br>content <br>content <br>content <br>content <br>content <br>content <br>content <br>content <br>
    </div>
</div>
<div class="footer-section"></div>

</body>
</html>

如何用 CSS 创建这个 Material Design 背景（见下图）？

How to create this material design background (see image below) with CSS?

html

css

background