축소 된 배경 이미지를 얻는 방법은 무엇입니까?

-1

그래서 내 페이지의 dunnrite.co.uk/frame2에서 "text design"헤더 밑에 5 개의 솔리드 블록 아래에 몇 가지 패턴이 있습니다. div의 배경 이미지로 설정됩니다. 문제는 해당 div가 너무 작아서 원래 이미지의 부하를 줄이기 때문입니다. 패턴을 더 잘 보여주기 위해 표시된 이미지가 더 크게 축소되도록하려면 어떻게해야합니까?축소 된 배경 이미지를 얻는 방법은 무엇입니까?

내 CSS는, 조나단

출처

2014-09-02 jonneyboy99

공유 할 모든 코드 ... – ekostadinov

사용 background-size CSS 속성

단지

background-image:url("Images/pattern12.jpg");

감사합니다, 그리고 아마도 당신은 배경이 완전히 커버 있도록 보장하는 cover 값을 사용하려면 컨테이너에서 이미지를 왜곡하지 않고 (종횡비가 다른 경우 클리핑이 발생 함)

배경 이미지에 명시적인 크기를 지정할 수도 있습니다 (예 : 45px).

background-size에 대한 문서는 여기에서 찾을 수 있습니다 : https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

출처

2014-09-02 12:06:24 Tiborg

완벽한 데모 링크입니다. 나는 -webkit-background-size : 표지를 추가했다. -moz-background-size : 표지; -o-background-size : 표지; background-size : 표지; \t -ms-interpolation-mode : bicubic; – jonneyboy99

내가 변환을 사용 요소 확대 : 규모 (2,2); 재산. 여기

는 .. http://jsfiddle.net/s3hWj/4/

<div class="wrap"> 
    <div></div> 
    <p>hello</p> 
</div> 


html, body { 
    height: 100%; 
} 

div.wrap { 
    height: 33%; 
    width: 33%; 
    overflow: hidden; 
    position: relative; 
} 

div.wrap > div { 
    position: absolute; 
    height: 100%; 
    width: 100%; 
    -moz-transition: all .5s; 
    -webkit-transition: all .5s; 
    transition: all .5s; 
    -moz-transform: scale(1,1); 
    -webkit-transform: scale(1,1); 
    transform: scale(1,1); 
    background-image: url('http://pimg.tradeindia.com/00288122/b/0/Our-Valuable-Client-List-Click-on-Image-.jpg'); 
    -moz-background-size: cover; 
    -webkit-background-size: cover; 
    background-size: cover; 
    z-index: -1; 
} 

div.wrap:hover > div { 
    -moz-transform: scale(2,2); 
    -webkit-transform: scale(2,2); 
    transform: scale(2,2);  
}

출처

2014-09-02 12:06:24 Komal

축소 된 배경 이미지를 얻는 방법은 무엇입니까?

답변

관련 문제