2013-06-19 1 views
0

배경 이미지에 두 개의 이미지를 사용하고 있습니다. (북 엔드의 두 개의 따옴표)사파리에서 작동하지 않는 배경에 두 개의 이미지를 사용하는 경우

하나의 이미지 만 사용하면 Safari에서 작동합니다. 이 CSS를 두 개의 이미지로 사용해도 Safari에서는 더 이상 작동하지 않습니다. Firefox에서 작동합니다.

배경 : 투명한 URL (../ images/quote.png) no-repeat 왼쪽 위, url (../ images/quote2.png) no-repeat 오른쪽 하단 25px;

답변

0

이 작동합니다 :

background: url(../images/quote.png) top left no-repeat, 
      url(../images/quote2.png) right bottom 25px no-repeat; 

당신은 마지막 (가운데) 레이어의 배경색을 지정할 수 있습니다. 이 경우 귀하의 transparent은 필요하지 않습니다. 다른 CSS를 재설정하려면이 줄 앞에 background-color: transparent;을 입력하십시오.

모든 브라우저에서 지원되지는 않습니다. 더 나은 옵션은 컨테이너 div/span에 요소를 래핑하는 것입니다. 하나의 배경을 요소에 적용하고 다른 하나는 컨테이너 div/span에 적용합니다.

0

조언 해 주셔서 감사합니다. 나는 당신의 div 제안을 일찌기 시도하고, 운동하지 않았다. 그러나, 나는 그것을 사용하여 아직도 끝내었다. 사파리와 관련하여 한 가지 변화가있었습니다. 그것은 내가 정의한 위치를 좋아하지 않는 것 같습니다. 오른쪽 하단 25px 반복 없음 특히 오른쪽과 아래.

여기 제가 사용을 끝내고 작동했습니다. Flexslider 상호 작용의 문제 일 수 있습니다. 확실하지 않다. 그러나 이것은 효과가있었습니다. 다시 감사합니다.

.flexslider { margin: 0; padding: 0 0 0 25px; background:transparent url(../images/quote.png) no-repeat left top; } 

.flexslider .slides #test-text{ background: url(../images/quote2.png) no-repeat 345px 96px; } 
관련 문제