CSS：一块不同颜色的背景？答案

【问题标题】：CSS: a piece of background in different color?CSS：一块不同颜色的背景？
【发布时间】：2013-06-10 22:53:17
【问题描述】：

我正在尝试在不同颜色的 2 个部分中实现背景的跨浏览器实现。

为此，我编写了以下代码（小提琴：http://jsfiddle.net/yrQAx/）：

<!DOCTYPE html>
<html>
  <head>
    <title>test</title>
    <style type="text/css">
      .block {
        position: relative;
        background-color: #ddd;
        overflow: hidden;
      }

      .block .bottom-color {
        position: absolute;
        z-index: 999;
        top: 10%;
        left: 0px;
        width: 150%;
        height: 300%;
        background-color: #bbb;
        -moz-transform:rotate(173deg);
        -webkit-transform:rotate(173deg);
        -o-transform:rotate(173deg);
        -ms-transform:rotate(173deg);
        transform:rotate(173deg);
        filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1.73);
      }

      .block .content {
        position: relative;
        background: transparent;
        z-index: 1000;
      }
    </style>
  </head>
  <body>
    <div class="block">
      <div class="content">
        <h2>Lorem ipsum</h2>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lacinia, nibh nec cursus ultricies, est ligula tempus lectus, eget eleifend orci ipsum vitae velit. Proin mollis pharetra fermentum. Nullam sed semper nulla. Donec fermentum faucibus faucibus. Aenean rhoncus, mi viverra ultrices tincidunt, erat nibh auctor nisi, nec fermentum turpis orci euismod ligula. Sed eu tincidunt nunc, non molestie nisi. Nunc consequat, est in euismod consequat, libero justo laoreet lectus, id ornare ante tortor non magna. Fusce porta fringilla elementum. Maecenas pharetra nunc orci, ut facilisis ipsum iaculis ultrices. Vestibulum non odio eget enim pulvinar facilisis a ac nunc. Vestibulum sodales augue et lorem pulvinar bibendum id id turpis.

        Vestibulum blandit cursus imperdiet. Vestibulum venenatis massa diam, auctor pretium nisl rhoncus sit amet. Sed interdum metus tellus, id faucibus risus rhoncus vel. Duis tincidunt est quis justo suscipit pulvinar. Donec condimentum libero in turpis interdum, sed feugiat enim tempus. Vivamus a quam venenatis dui porta consectetur. Mauris ac scelerisque erat. Cras adipiscing purus a sem varius interdum ac sit amet nunc. Quisque iaculis ante nisl, non fringilla ante egestas eget. Sed sit amet est ultricies, commodo odio vitae, blandit justo. Fusce volutpat laoreet blandit. Mauris sapien arcu, sollicitudin quis porta non, rhoncus sed orci. Pellentesque faucibus neque at est ultrices dignissim. Quisque viverra, tortor ut feugiat aliquet, nisl nulla ullamcorper nisl, id laoreet dui turpis vel mi. Nunc sagittis, dui in posuere pharetra, libero nulla sollicitudin quam, venenatis imperdiet mi velit quis nibh.

        Pellentesque nibh massa, faucibus et nisl nec, ullamcorper tincidunt nibh. Proin iaculis commodo sapien, nec dapibus augue luctus eget. Praesent magna augue, semper non orci id, vehicula imperdiet justo. Nulla porta gravida euismod. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque vitae est egestas, dictum quam ut, semper nisl. Suspendisse ligula orci, tincidunt venenatis convallis eu, condimentum in nunc. Vestibulum mollis fermentum malesuada. Sed rutrum erat quis quam molestie condimentum.

        Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer consectetur congue massa, eu viverra nisi tristique ut. Maecenas pulvinar eget sem in pharetra. Nulla malesuada ultricies eros, ac tristique massa pulvinar ut. Fusce mattis auctor leo, ut ultrices eros ultricies vel. Fusce ac augue nec mi congue sollicitudin at quis nisi. In nec venenatis arcu. Integer ac mauris dapibus, imperdiet nibh suscipit, venenatis arcu. Etiam hendrerit magna ligula, et sodales nunc imperdiet id. Praesent dapibus erat ac ipsum tempor fringilla. Fusce posuere massa sit amet elit porta, in facilisis ipsum dapibus.
      </div>
      <div class="bottom-color"></div>
    </div>
  </body>
</html>

如您所见，它基于旋转 div.bottom-color 元素，该元素负责第二种颜色。有一个大问题：每当我调整容器 (div.block) 的大小时，第二种颜色可能完全丢失，或者第一种颜色（div.container 背景）正在丢失。

所以我的问题是：我该如何解决这个问题？还是我做错了，应该以其他方式完成这种效果？

【问题讨论】：

标签： css cross-browser effects

【解决方案1】：

最好的办法是使用渐变背景。当然，角度需要调整。

http://cssdeck.com/labs/xbmc9zum

.content {
    background: #ebf1f6; /* Old browsers */
    background: -moz-linear-gradient(-45deg, , #bbb, #bbb 20em, #ddd 20em); /* FF3.6+ */
    background: -webkit-linear-gradient(-45deg, , #bbb, #bbb 20em, #ddd 20em); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-45deg, , #bbb, #bbb 20em, #ddd 20em); /* Opera 11.10+ */
    background: -ms-linear-gradient(-45deg, , #bbb, #bbb 20em, #ddd 20em); /* IE10+ */
    background: linear-gradient(135deg, #bbb, #bbb 20em, #ddd 20em); /* W3C */
}

http://www.colorzilla.com/gradient-editor/

【讨论】：

这个，因为我最讨厌的是标记，除了提供视觉噱头之外没有其他目的

【解决方案2】：

您的解决方案不是跨浏览器友好的。您应该做的是创建一个 .png 图像，该图像的一侧三角形带有深灰色。并让另一面100%透明，让背景色看透。您制作的图像会很大 - 但幸运的是，当您仅使用 2 种颜色时，png 图像仅占用几个字节。

【讨论】：

我真的很想把它变成纯 CSS。我知道 PNG 是最有效的方式，但它需要我想避免的后端更改。
对于纯装饰性的东西，它是否不适合跨浏览器是否重要？如果您考虑文本浏览器 Lynx，PNG 就不是跨浏览器友好的。
引用自 OP：I'm trying to make a crostsbrowser implementation of background.... 因此跨浏览器友好。没有其他解决方案。你必须使用 CSS3+...但是你会疏远使用旧版浏览器的用户（即我的工作仍然使用 Ie7）。

【解决方案3】：

最好的办法是使用 cimmanon 解决方案（渐变）。

但是，如果您想让您的解决方案发挥作用，请查看 CSS

    top: 0px;
    right: 0px;
    width: 150%;
    height: 300%;
    background-color: #bbb;
    -moz-transform:rotate(-26deg);
    -webkit-transform:rotate(-26deg);
    -o-transform:rotate(-26deg);
    -ms-transform:rotate(-26deg);
    transform:rotate(-26deg);
    -webkit-transform-origin: top right;
    transform-origin: top right;

我在右上角添加了一个 trandform 原点。这样，您就可以让 div 围绕该点旋转。还要注意顶部的 0px 和右侧的 0px，这也使这一点（右上角）定位良好。

随着这些变化，div 将始终在您想要的位置。

demo

【讨论】：