伪：在不采用 chrome 中的背景属性之前答案

【问题标题】：pseudo:before not taking background property in chrome伪：在不采用 chrome 中的背景属性之前
【发布时间】：2014-02-23 18:58:20
【问题描述】：

伪 :before 适用于 Firefox、Safari 但不适用于 Chrome。它是一个方形盒子，旋转形成菱形。但是，使用 :before bg 再次向后旋转并固定位置。它给出了一个非常好的效果！检查我的网站： www.wangeltmg.com 当您第一次滚动时，背景会重叠并创建模糊的图像以清除..！我所做的只是

#element3
  {
    width: 1000px;
    height:1000px;
    line-height: 5em;
    margin: 0px auto;
    border: 0px solid #666;
    border-radius: 3px;
    margin-top:150px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);

    position: absolute;
    overflow: hidden;
    left:0; right:0;
    top:10%;
  }

  #element3:before
  {
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -10%;
    z-index: 0;
    background: url(../img/custom11.jpg) 0 0 no-repeat fixed; 
    background-size:135% 135%; 
    background-position:140px -315px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }

在与 Chorme 的兼容性方面有什么工作要做吗？

我很想得到你们的答案，伙计们。

谢谢。

【问题讨论】：

请提供一个独立的示例。链接到网站是不切实际的（例如，如果网站离线怎么办？如果它改变了怎么办？）。嵌入该 CSS sn-p 的标记 (HTML)，和/或链接到现场演示（使用例如 jsFiddle）。
为什么是近距离投票？这绝对是主题。

标签： css pseudo-element css3pie

【解决方案1】：

您的 CSS 背景在 chrome 上表现异常，因为您需要添加：

-webkit-transform 带有 Chrome 前缀的 CSS 3 转换。

.parallax-two #element3 {
    border: 0 solid #666666;
    border-radius: 3px;
    height: 1000px;
    left: 0;
    line-height: 5em;
    margin: 150px auto 0;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 10%;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    width: 1000px;
}

http://fiddle.jshell.net/mmvdz/6 http://fiddle.jshell.net/mmvdz/6/show/

对于 Firefox、Chrome、Opera、IE 等，最好也添加供应商前缀 CSS3 版本。例如，旧版本的 Firefox 也需要它。

    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);

如果你使用像 Sublime Text 这样的编辑器来手动编码。您有自动添加此供应商前缀的插件。 http://www.hongkiat.com/blog/css-automatic-vendor-prefix/

我确实看到您在 Chrome 上遇到了另一个问题。固定 div 存在 z-index 问题。它似乎与 webkit 的 CSS 3 转换属性有关，它使三角形出现在固定 div 上方，但在 Chrome 中没有模糊效果。

#home-wrap {
  -webkit-backface-visibility: hidden;
}

【讨论】：