涡卷{

Question

拍摄完整的黑色网页。在这个网页上是一个100％大小的白色div填充整个页面。我想将这个div旋转-7度（或逆时针7度）。这将导致黑色背景在边缘上的三角形中可见，就像您在桌子上放置一张纸并将其稍微向左转。

实际上这可以通过一些css来完成，并且它运行得很好（除了IE）。

现在真正的问题是：我希望在其上方有一个普通的，不旋转的div元素来显示内容，以便只旋转背景。

反向旋转包含的div不起作用，因为通过这两个转换，文本在所有浏览器中都会模糊。

我怎么能意识到这一点？ Best将是当前Webkit浏览器，FF3.5 +和IE7 +的解决方案。如果只有IE8 +我也可以忍受。

Answer 1

尝试使用

#content {

 position: absolute;
 z-index: 500;
 margin-left: auto;
 margin-right: auto;
}

#background {
//Your white DIV
}


<div id="background"></div>

<div id="content">
 Lorem ipsum
</div>

Answer 2

在后台使用position:absolute;，在后面使用z-index。 Here is an example.

Answer 3

你必须将其旋转回来...... http://jsfiddle.net/gFCHE/ 在Chrome或ChromeOS上根本不模糊。它也不应该是其他任何地方。

将overflow:hidden添加到#crooked以获得带图像的炫酷效果。这个CSS可以帮助您入门，但您需要根据需要调整它。

<div id='wrap'>
    <div id='cooked'>
        <div id='straight'>
        </div>
    </div>
</div>


  #wrap{
    background:#000;
    height:100%;
}
#crooked{
    height:100%;
    color:#f00;
     -moz-transform: rotate(-7.0deg);  /* FF3.5+ */
       -o-transform: rotate(-7.0deg);  /* Opera 10.5 */
  -webkit-transform: rotate(-7.0deg);  /* Saf3.1+, Chrome */
      -ms-transform: rotate(-7.0deg);  /* IE9 */
          transform: rotate(-7.0deg);  
          filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */ 
                 M11=0.992546151641322, M12=0.12186934340514748, M21=-0.12186934340514748, M22=0.992546151641322, sizingMethod='auto expand');
           zoom: 1;
}

涡卷{

    background:#000;
    height:100%;
}
#crooked{
    height:100%;
    background:#fff;
     -moz-transform: rotate(-7.0deg);  /* FF3.5+ */
       -o-transform: rotate(-7.0deg);  /* Opera 10.5 */
  -webkit-transform: rotate(-7.0deg);  /* Saf3.1+, Chrome */
      -ms-transform: rotate(-7.0deg);  /* IE9 */
          transform: rotate(-7.0deg);  
          filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */ 
                 M11=0.992546151641322, M12=0.12186934340514748, M21=-0.12186934340514748, M22=0.992546151641322, sizingMethod='auto expand');
           zoom: 1;
}
#straight{
     -moz-transform: rotate(7.0deg);  /* FF3.5+ */
       -o-transform: rotate(7.0deg);  /* Opera 10.5 */
  -webkit-transform: rotate(7.0deg);  /* Saf3.1+, Chrome */
      -ms-transform: rotate(7.0deg);  /* IE9 */
          transform: rotate(7.0deg);  
         filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */ 
                 M11=0.992546151641322, M12=-0.12186934340514748, M21=0.12186934340514748, M22=0.992546151641322, sizingMethod='auto expand');
           zoom: 1;

Html + Css：如何创建自动调整大小的旋转背景？

3 个答案:

涡卷{