html - 创建具有对 Angular 线背景颜色的全宽标题

Question

我要解释的有点复杂，所以我做了一张图片希望它能帮助我们。

这是 large image .

在页面的顶部有一个标题。它必须具有一些特征:

1. 它必须是全宽的，但是...

2. 它的内容( Logo 和菜单)被包裹在居中的 div 中，960px 宽度

   这两点很简单:我创建了一个具有固定高度和 100% 宽度的页眉，然后是一个宽度为 960px 和边距为 0 的 div auto 以便它始终居中。

   困难来了:

3. 如您所见，背景颜色是透明的，实际上我们在标题下方看到了照片。并且这种透明度对于所有标题都是不一样的:我应该在其中放置 Logo 的一侧具有一定的不透明度值，而菜单的一侧具有另一个值。而且，两侧由对 Angular 线隔开。

这似乎很容易，但我没有找到一个解决方案来按照图像中显示的方式设置背景而不会出现问题。

Answer 1

这是一个纯 CSS 解决方案。

更新版本:

为了实现全 Angular 多色标题，我改变了主意，决定使用 CSS3 Gradient , 如今所有现代网络浏览器都支持 linear-gradient , 但可以使用透明图像或 SVG 作为旧浏览器的后备。

HTML:

<div class="header">
  <div class="wrapper">

    <div class="left">Left</div>
    <div class="right">right side</div>

  </div>
</div>

CSS:

.header {
  background: -webkit-linear-gradient(-20deg, rgba(230, 0, 200, 0.5), rgba(230, 0, 200, 0.5) 40%, rgba(200, 0, 200, 0.3) 40%, rgba(200, 0, 200, 0.3));
  background:    -moz-linear-gradient(-20deg, rgba(230, 0, 200, 0.5), rgba(230, 0, 200, 0.5) 40%, rgba(200, 0, 200, 0.3) 40%, rgba(200, 0, 200, 0.3));
  background:     -ms-linear-gradient(-20deg, rgba(230, 0, 200, 0.5), rgba(230, 0, 200, 0.5) 40%, rgba(200, 0, 200, 0.3) 40%, rgba(200, 0, 200, 0.3));
  background:      -o-linear-gradient(-20deg, rgba(230, 0, 200, 0.5), rgba(230, 0, 200, 0.5) 40%, rgba(200, 0, 200, 0.3) 40%, rgba(200, 0, 200, 0.3));
  background:         linear-gradient(110deg, rgba(230, 0, 200, 0.5), rgba(230, 0, 200, 0.5) 40%, rgba(200, 0, 200, 0.3) 40%, rgba(200, 0, 200, 0.3));

  min-width: 960px;
  width: 100%;
}

.wrapper {
  width: 960px;
  margin: 0 auto;
  outline: 2px dashed green; /* Just for demo */
}

.left, .right {
  height: 35px;
  line-height: 35px;
}

.left {
  float: left;
  width: 350px;
}

.right {
  text-align: right;
  margin-left: 350px;
}

这是 JSBin Demo .

上一个答案:

我使用了 :before 和 :after 伪元素来实现斜 Angular 。如果你想支持旧的 IE 版本，你可以简单地使用透明图像。

CSS:

.left, .right {
  position: relative;
  height: 35px;
  line-height: 35px;
}

.left {
  float: left;
  width: 200px;
  background-color: rgba(255, 200, 0, .5);
}

.right {
  background-color: rgba(255, 150, 0, .5);
  margin-left: 225px;
}

.left:after {
  content: ' ';
  display: block;
  border-style: solid;
  border-color: rgba(255, 200, 0, .5) transparent transparent transparent;
  border-width: 35px 25px 0 0;
  width: 0;
  height: 0;
  position: absolute;
  top: 0;
  right: -25px;
}

.right:before {
  content: ' ';
  display: block;
  border-style: solid;
  border-color: transparent transparent rgba(255, 150, 0, .5) transparent;
  border-width: 0 0 35px 25px;
  width: 0;
  height: 0;
  position: absolute;
  top: 0;
  left: -25px;
}

JSBin Demo