具有垂直分割背景的全宽网站

Question

我正在实施一个网站，其布局如下

我有点混淆这个布局的HTML结构蓝色部分几乎是我的背景的一半，内容将居中，蓝色部分将始终精确划分为这个比例任何人都可以帮助我如何使它成为可能。我需要使用蓝色部分作为背景颜色的另一件事可能是RGBA。

Answer 1

伪元素可以在这里工作

＆＃13;

＆＃13;

* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
body {
  background-image: url(http://lorempixel.com/output/abstract-q-c-100-100-9.jpg);
}
body::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  height: 100vh;
  width: 50%;
  background: rgba(0, 0, 255, 0.5);
  z-index: -1;
}
.navbar {
  margin-top: 25px;
  height: 50px;
  background: green;
  border: 1px solid black;
}

＆＃13;

<div class="navbar"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

将此DIV放在身体标记之后：

var article = "I have to buy 3 apples, 7 bananas, 10 eggs"
var charArray = Array(article)

var unitValue = 0
var total = 0
for char in charArray.reverse() {

    if let number = "\(char)".toInt() {
        if unitValue==0 {
            unitValue = 1
        }
        else {
            unitValue *= 10
        }
        total += number*unitValue
    }
    else {
        unitValue = 0
    }
}
println("I bought \(total) apples.")

documentation