Html 如何使用css调整背景图像的大小并使其向右浮动？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7639010/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to resize and float right a background image using css?
提问by Genadinik
I am working on this site: http://www.problemio.comand I have a requirement to add the background image to the top banner which I did.
我正在这个网站上工作：http: //www.problemio.com，我需要将背景图片添加到我所做的顶部横幅中。
What I can't figure out how to do is how to shift it all the way to the right and make it smaller in length so that it only takes up half of the screen width.
我不知道如何做的是如何将其一直向右移动并使其长度变小，使其仅占屏幕宽度的一半。
Any idea how to do that? So far I have this css for the overall banner div:
知道怎么做吗？到目前为止，我有整个横幅 div 的 css：
.banner
{
width:60em;
margin: 0 auto;
position: relative;
padding: 0.3em 0;
z-index: 1;
background-image: url('http://www.problemio.com/img/ui/problemiotoprightimage.png');
background-repeat: no-repeat;
background-image: right-align
}
but I don't know how to make the background image align right and rescale to be 50% of the entire width of the div. Any ideas?
但我不知道如何使背景图像右对齐并重新缩放为 div 整个宽度的 50%。有任何想法吗？
Thanks!
谢谢！
回答by MacMac
You can use left, right, bottom, topand centerfor aligning backgrounds. Also percentages.
您可以使用left，right，bottom，top和center用于对齐背景。还有百分比。
background: url('http://www.problemio.com/img/ui/problemiotoprightimage.png') right no-repeat;
However, you cannot resize the images using CSS2 but in CSS3.
但是，您不能使用 CSS2 而在 CSS3 中调整图像大小。
background-size: <width> <height>;
More usage:
更多用法：
background: url('http://www.problemio.com/img/ui/problemiotoprightimage.png') top right no-repeat;
To align bottom and centered:
对齐底部和居中：
background: url('http://www.problemio.com/img/ui/problemiotoprightimage.png') bottom center no-repeat;
回答by Niet the Dark Absol
Use background-position: right;and background-size: [width] [height](replace values where needed).
使用background-position: right;和background-size: [width] [height]（在需要的地方替换值）。
