如何獲得縮小的背景圖像？

-1

所以在我的網頁上：dunnrite.co.uk/frame2你會在「文字設計」標題下找到5種顏色固體塊下的一些圖案。它們被設置爲div的背景圖像。問題是因爲我想要這些div如此之小，它會將剪輯從原始圖像中剪下來。我如何得到它，以便顯示的圖像更加縮小，以更炫目地顯示圖案？如何獲得縮小的背景圖像？

我的CSS只是

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

感謝，

喬納森

來源

2014-09-02 jonneyboy99

你想分享的任何代碼... – ekostadinov 2014-09-02 11:56:50

使用background-size CSS屬性，可能要使用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：cover; -moz-background-size：cover; -o-background-size：cover; background-size：cover; \t -ms-interpolation-mode：bicubic; – jonneyboy99 2014-09-02 12:25:07

我使用變換的元件放大：比例（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

如何獲得縮小的背景圖像？

回答

相關問題