通過CSS調整背景圖片的大小

我有這個175x175的背景圖片，但我試圖製作一張「CD」封面。在下面的代碼（jsFiddle available）中，您會看到它沒有調整大小，而只是「裁剪」。我該如何解決？通過CSS調整背景圖片的大小

HTML：

<div class="cd"><div class="hole"></div></div> 
<p>I want the image above to be resized to 75x75... but it's not</p> 

<img src="http://userserve-ak.last.fm/serve/126/23679395.jpg" alt="Test" /> 
<p>Actual image size above.</p>

CSS：

.cd { 
    -moz-border-radius: 63px; 
    -webkit-border-radius: 63px; 
    border-radius: 63px; 
    background-image: url('http://userserve-ak.last.fm/serve/126/23679395.jpg'); 
    width: 75px; 
    height: 75px; 
    position: relative; 
    border:1px solid #A1A1A1; 
} 
.cd .hole { 
    width: 20px; 
    height: 20px; 
    position: absolute; 
    background-color: #ddd; 
    border:1px solid #A1A1A1; 
    left: 28px; 
    top: 28px; 
    -moz-border-radius: 15px; 
    -webkit-border-radius: 15px; 
    border-radius: 15px; 
}

來源

2012-06-12 nn2

請先做一些研究：https://developer.mozilla.org/en/CSS/background-size –

我已經得到了我的答案 - 謝謝！ – nn2

使用background-size CSS屬性：

background-size: 75px 75px;

或者：

background-size: 100% 100%;

還有速記background屬性：

background: url('http://userserve-ak.last.fm/serve/126/23679395.jpg') 100% 100%;

來源

2012-06-12 05:58:25 McGarnagle

這個屬性如何工作，你能解釋一下嗎？謝謝 – freebird

https://developer.mozilla.org/en/CSS/background-size –

我很愚蠢。我甚至忘記了這一點。 Gracias para esto。 – nn2

使用背景尺寸喜歡這裏：

.cd { 
    -moz-border-radius: 63px; 
    -webkit-border-radius: 63px; 
    border-radius: 63px; 
    background-image: url('http://userserve-ak.last.fm/serve/126/23679395.jpg'); 
    background-size: 75px; 
    width: 75px; 
    height: 75px; 
    position: relative; 
    border:1px solid #A1A1A1; 
}

例子： http://jsfiddle.net/5CDnw/6/

來源

2012-06-12 05:59:29 Viezevingertjes

使用背景尺寸：覆蓋將填補容器無論是容器的大小。

.cd { 
    -moz-border-radius: 63px; 
    -webkit-border-radius: 63px; 
    border-radius: 63px; 
    background-image: url('http://userserve-ak.last.fm/serve/126/23679395.jpg'); 
    background-size:cover;/*Add This*/ 
    -webkit-background-size: cover;/*Add This for webkit*/ 
    -moz-background-size: cover;/*Add This for mozilla*/ 
    -o-background-size: cover;/*Add This for opera*/ 
    width: 75px; 
    height: 75px; 
    position: relative; 
    border:1px solid #A1A1A1; 
}

來源

2012-06-12 06:05:58 SVS

+1這裏是[jsFiddle]（http://jsfiddle.net/5CDnw/8/）我正準備發佈答案。 – arttronics

通過CSS調整背景圖片的大小

回答

相關問題