CSS의 이미지 레이어링 - 동일한 요소에 2 개의 이미지를 넣을 수 있습니까?

StackOverflow https://stackoverflow.com/questions/402200

  •  03-07-2019
  •  | 
  •  

문제

다음과 같은 CSS에서 웹 페이지의 배경 이미지를 설정한다고 가정합니다.

body    {
font-size: 62.5%; /* Resets 1em to 10px */
font-family: Verdana, Arial, Sans-Serif;
background-color: #9D5922;
color: #000;
margin-left: auto;
margin-right: auto;
margin: 0;
padding: 0; 
background: url(images/desk.gif) repeat bottom left;
}

신체 요소 자체 내에있는 두 번째 이미지를 책상 위에 두 번째 이미지를 겹치는 방법이 있습니까? 아니면 별도의 클래스를 생성하고 z 축을 사용하는 유일한 방법입니까?

죄송합니다, 그것은 단순한 질문이지만, 나는 이것을 알아 내려고 노력했지만 그것을 작동시킬 수는 없었지만 온라인 어디에서나 아이디어를 명확하게 찾지 못했습니다. 방법이 있습니까, 아니면 이건 그냥 할 수 있습니까?

감사!

도움이 되었습니까?

해결책

요컨대, 불가능합니다. 이 작업을 수행 할 수 있지만 페이지에 두 번째 HTML 객체를 추가하여 작동하도록해야합니다. 예를 들어, 신체 바로 아래에 div 블록을 놓고 두 번째 배경을 해당 물체에 할당하십시오.

도움이 되었기를 바랍니다!

다른 팁

계층화 된 배경은의 일부입니다 CSS3 작업 초안 그러나 내가 아는 한, 그들에 대한 지원은 Safari, Chrome, Konqueror 및 Omniweb와 같은 WebKit/Khtml 기반 브라우저로 제한됩니다.

예제 코드를 사용하면 다음과 같습니다.

body    {
    font-size: 62.5%; /* Resets 1em to 10px */
    font-family: Verdana, Arial, Sans-Serif;
    background-color: #9D5922;
    color: #000;
    margin-left: auto;
    margin-right: auto;
    margin: 0;
    padding: 0; 
    background: url("images/top.gif") left bottom repeat,
                url("images/desk.gif") left bottom repeat;
}

이미 해결책을 중복 질문에 게시했지만이 정보가 필요한 사람이라면 여기에 게시하겠습니다.

내가 아는 한, 동일한 레이어에 넣을 수는 없지만 여러 이미지를 별도의 DIV에 넣을 수 있으며 대중적인 유용성 테스트 웹 사이트에서 구현되었습니다. 실버 백 (배경을 확인하여 레이어가 어떻게 겹쳐 졌는지 확인하십시오). 소스 코드를 살펴보면 배경이 여러 이미지로 구성되어 있음을 알 수 있습니다.

다음은 효과를 수행하는 방법을 보여주는 기사입니다. 비타민. 이 '양파 피부'층을 포장하는 비슷한 개념은 찾을 수 있습니다. 목록.

요즘 이것은 모든 "현대"브라우저 (<IE9, AFAIK)에서 수행 할 수 있습니다. Firefox, Opera, Chrome에서 작동하는지 확인할 수 있습니다. 구형 브라우저 / IE에 대한 괜찮은 폴백 솔루션이있는 한 그렇게하지 않을 이유가 없습니다.

구문의 경우 중에서 선택할 수 있습니다

  background:url(..) repeat-x left top,
             url(..) repeat-x left bottom;

그리고

  background-image:url(..), url(..);
  background-position:left top, left bottom;
  background-repeat:repeat-x;

라인 브레이크가 필요하지 않지만 쉼표가 중요합니다.

주목! 다음은 하나의 이미지 URL 만 지정하더라도 두 개의 배경을 생성합니다.

  background-image:url(..);
  background-position:top, bottom;

물론 중첩 된 용기를 사용하는 대안이 있지만 HTML을 팽창시킵니다.

유일한 방법은 다른 컨테이너를 사용하는 것입니다. 각 요소에는 하나의 배경 이미지 만 포함 할 수 있습니다.

절대 포지셔닝과 Z- 인덱스를 사용하여 두 번째 요소를 상단에 가져옵니다.

링크 텍스트

위에서 언급 한 링크가 당신이 무엇을 가장 잘 설명합니다 ...

HTML 요소에 스타일을 적용 할 수 있다는 것을 잊지 마십시오.

html {
background: url(images/whatever.gif);
}
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top