CSS에서 이미지를 두 개 이상 사용하는 방법

공기 방울이 들어있는 페이지 배경을 디자인 중입니다. 거품 이미지를 화면의 많은 부분에 넣고 싶습니다. HTML 파일에 다음 코드를 사용합니다.CSS에서 이미지를 두 개 이상 사용하는 방법

<body> 
<div class="bg"> 
     <img id="bubble" src="images/bubble.png" /> 
</div>

이 거품 이미지를 여러 곳에 넣을 수있는 방법이 있습니까?

나를 다른 게시물 (내가 찾을 수 없음)로 보내거나 해결책을 제시해 주시면 감사하겠습니다. 미리 감사드립니다.

참고 : 거품이있는 단일 배경 파일을 사용하는 것은 옵션이 아닙니다.

출처

2012-05-08 Engin Yapici

당신은 자바 스크립트를 사용할 수에 거품 다음

<div id="bubble1" class="bubbles"></div> <div id="bubble2" class="bubbles"></div> <div id="bubble3" class="bubbles"></div>

를 개최,하지만 매우 중요한 아무것도에 대한 최상의 솔루션을 먹으 렴하는 용기가 필요합니다. – Teak

"여러 장소"를 정의 하시겠습니까? 그들은 지정된 장소입니까? 배경 이미지? 일정한 패턴 또는 무작위? 내가 묻는 것은 귀하의 질의에 대한 일반적인 의도는 무엇입니까? – xtraorange

그들은 무작위로 정렬되지 않습니다, 나는 여백/위치를 수동으로 정의 할 것입니다. 그들은 반복되는 패턴을 가지지 않을 것입니다. –

를 사용하여 거품에 대한 background-image을 정의하고 당신이 원하는 모든 페이지 요소에 스타일을 적용 할 CSS 스타일 필요

.bg { 
    background: transparent url(images/bubble.png) no-repeat; 
}

그런 다음 클래스를 재사용 할 CSS 클래스를 추가 할 수 있습니다 거품. 또한 position 요소를 도울 스타일을 정의하십시오.

.bubble { 
    background-image:url('images/bubble.png'); 
} 

.top { 
    position: absolute; 
    top: 0; 
} 

.bottom { 
    position: absolute; 
    bottom: 0; 
} 

<body> 
<div class="bubble top"> 
        
</div> 
<div class="bubble bottom"> 

<div> 
</body>

원하는 효과를 얻는 데 도움이되는 몇 가지 다른 배경 속성이 있습니다. 위치, 반복, 크기, 클립.

출처

2012-05-08 05:25:53

이것은 다른 것들보다 조금 더 효율적이다. 나는 이것을 사용할 것이다. 감사! –

당신은

출처

2012-05-08 05:21:56 Craig

그럼 더 좋은 방법은 없을까요? 나는 더 효율적인 방법을 찾고 있었지만 나는 이것을 사용하여 끝낼 것이라고 생각한다./ –

당신이 당신의 .CSS

.bubbles{ 
    background: url(images/bubble.png); 
    position: absolute;} 

#bubble1{ 
    left: 10px; 
    top: 10px; 
} 
#bubble2{ 
    left: 50px; 
    top: 150px; 
} 
#bubble3{ 
    left: 80px; 
    top: 180px; 
}

출처

2012-05-08 05:29:27 killebytes

CSS에서 이미지를 두 개 이상 사용하는 방법

답변

관련 문제