通过CSS调整背景图片的大小 [英] Resizing a background image via CSS
本文介绍了通过CSS调整背景图片的大小的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有这个背景图片是175x175,但我想做一个CD封面。在下面的代码中( jsFiddle可用),您会看到它未调整大小,而只是裁剪。如何解决此问题?
I have this background image that is 175x175 but I am trying to make a "CD" cover out of it. In the code below (jsFiddle available), you will see it is not resized but merely "cropped". How do I fix this?
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;
}
推荐答案
https://developer.mozilla.org/en/CSS/background-size =nofollow noreferrer> background-size CSS属性:
Use the background-size CSS property:
background-size: 75px 75px;
或者:
background-size: 100% 100%;
还有缩写 背景 属性:
There's also the shorthand background property:
background: url('http://userserve-ak.last.fm/serve/126/23679395.jpg') 100% 100%;
这篇关于通过CSS调整背景图片的大小的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文