여러 배경 이미지를 만드는 가장 좋은 방법은 무엇입니까?

("문의"이미지 # 2 등을 가지고, 즉 "메뉴의"이미지 # 1가) 다른 하위 페이지에 대해 서로 다른 배경 이미지를 갖고 싶어 나는 다음과 같은 CSS 코드가 있습니다

html { 
background: url(images/bg.jpg) no-repeat center center fixed; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover;

을

}

그러나이 방법은 모든 서브 페이지에 이미지를 이미지로 설정합니다. 이제는 각 서브 페이지가 html에 다른 div (예 : div id = "menubg"; div id = "contactusbg")를 만들 수 있고 각 div에 대해 위의 CSS (약간 변경됨)를 추가하지만 불필요한 톤을 만듭니다 CSS 항목.

그럼 더 좋은 방법이 있을까요?

배경 이미지를 HTML에 직접 입력하고 해당 이미지에 CSS를 하나 추가해야합니까? "커버"와 같은 모든 CSS 속성을 보존 할 수 있습니까? (이상적으로 각 HTML에 이미지 용 코드가 있고 모든 서브 페이지에 대해 하나의 CSS가 필요합니다. 그럴 수 있습니까?)
자바 스크립트 (또는 기타)를 사용하고 있습니까?
여러 CSS 스타일이 유일한 해결책입니까?

감사합니다.

출처

2014-11-26 Baki

일반적으로 이렇게하는 방법은 body에 html이 아닌 배경을 지정하는 것입니다. 당신은 자신의 몸에있는 페이지의 ID 이름을 부여하기를 원할 것입니다. 당신이 menu 및 IMG2에 img1로를 원하는 경우,

body { 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    background-repeat:no-repeat; 
    background-position:center; 
    background-attachment:fixed; 
}

다음 : 모든

첫째, 당신은 자신의 라인으로 추가 background 모든 정보를 넣어뿐만 아니라 몸의 모든 요소 담요에 원하는

<body id="menu">

는 다음 CSS에 당신은 그냥 그 자체로 당신의 background-image 속성에 쓰기 : contact us, 당신의 body 두 중 하나의 ID를 제공

body#menu { 
    background-image: url(images/bg1.jpg); 
}

및 연락처 페이지와 같은 : -

<body id="contact-us">

body#contact-us { 
    background-image: url(images/bg2.jpg) no-repeat center center fixed; 
}

그래서 CSS 파일은 다음과 같이 찾고 끝 :

body { 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    background-repeat:no-repeat; 
    background-position:center; 
    background-attachment:fixed; 
} 
body#menu { 
    background-image: url(images/bg1.jpg); 
} 
body#contact-us { 
    background-image: url(images/bg2.jpg); 
}

출처

2014-11-26 17:53:28 ntgCleaner

흠을, 그러나 이미지 자체의 크기를 조정하지 않습니다, 또는 본문의 전체 CSS 블록을 반복해야합니다, 즉, th e css body # menu는 다음과 같습니다. ** body # menu { background : url (images/bg.jpg) 반복되지 않는 가운데 중심 고정; -webkit-background-size : 표지; -moz-background-size : 표지; -o-background-size : 표지; background-size : cover; ** **} 반복 횟수를 줄이려면 어떻게해야합니까?그것은 심지어 차이를 만드나요? *** 포메이션팅에 대해 미안하지만, 라인 브레이킹을 할 수없는 것 같습니다. – Baki

@baki, CSS의 첫 번째 바디 라인이 배경을 고정하고 크기를 처리합니다. 나머지 두 개의 바디 라인은 배경 이미지 만 필요합니다. 이렇게하면 모든 본문 요소의 크기와 위치가 결정되며 각 개별 본문 요소는 이미지 만 지정하면됩니다. 컴퓨터를 사용하면 더 잘 설명 할 수 있습니다. 전화는 이걸 위해 훌륭하지 않아! – ntgCleaner

흠 나는 나를 위해 작동하지 않습니다. 코드가 매우 단순 해 보이지만 (크롬과 IE에서 테스트 된) 무언가를 놓치고 있다고 생각합니다. 배경 크기가 조정되지 않습니다. body # 메뉴에 추가 규칙이있는 이미지 만 포함되어 있습니까? – Baki

여러 배경 이미지를 만드는 가장 좋은 방법은 무엇입니까?

답변

관련 문제