1

我要解释的有点复杂，所以我做了一个图像希望它可以帮助我们。

在此处输入图像描述 这是大图。

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

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

  2. 它的内容（标志和菜单）被包裹在一个居中的 div 中，960px宽度

    这两点很简单：我创建一个具有固定高度和宽度的标题，然后创建一个具有宽度和边距100%的 div，以便它始终居中。960px0 auto

    现在困难来了：

  3. 如您所见，背景颜色是透明的，实际上我们在标题下看到了照片。并且这种透明度对于所有标题都不相同：我应该定位徽标的一侧具有一定的不透明度值，而菜单的一侧具有另一个值。而且，两条边由对角线隔开。

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

4

2 回答 2

1

这是一个纯 CSS 解决方案。

更新版本：

为了实现全角多色标题，我改变主意并决定使用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 演示。

上一个答案：

我已经使用:before和:after伪元素来实现斜角。如果您想支持旧的 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 演示

于 2013-08-19T11:15:42.943 回答
0

CSS color 属性可以被 rgba 方法使用。

background:rgba(RED,GREEN,BLUE,OPACITY);

例如，如果你想让背景变成红色，不透明度为 50%，那么你必须使用下面的代码。

background:rgba(255,0,0,0.5);

你必须知道的事情

  • 颜色（红绿或蓝）的最大值为 255，而最小值为 0。
  • 不透明度的最高值为 1，最低值为 0。
于 2013-08-19T11:39:30.250 回答