의사 : 크롬에서 배경 속성을 사용하지 않기 전에

Question

의사 : Firefox, Safari에서는 작동하지만 Chrome에서는 작동하지 않습니다. 사각형 모양의 상자가 회전되어 다이아몬드 모양을 형성합니다. 그러나, 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와의 호환성에 대한 작업을 할 수 있나요입니까?

나는 답변을 얻고 싶어합니다.

감사합니다. 추가 필요하기 때문에

Answer 1

귀하의 CSS 배경 크롬에 기괴한 행동한다 :

-webkit-변환 크롬 접두사로 변환 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; 
} 

파이어 폭스, 크롬, 오페라, IE 등이뿐만 아니라 공급 업체 접두사 CSS3 버전을 추가하는 것이 바람직하다 들어

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

. 예를 들어 이전 버전의 Firefox에도 필요합니다.

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

숭고한 텍스트와 같은 편집기를 사용하여 수동으로 코딩하는 경우. 이 공급 업체 접두사를 자동으로 추가하는 플러그인이 있습니다. http://www.hongkiat.com/blog/css-automatic-vendor-prefix/

크롬에 다른 문제가 있음을 확인했습니다. 고정 div에는 z- 색인에 문제가 있습니다. 그리고 그것은 웹킷의 CSS 3 변형 속성과 관련이있는 것으로 보입니다.이 속성은 크롬에서 흐림 효과없이 고정 된 div 위에 삼각형을 표시합니다.

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