示例: jsbin/opokev/20
全图: i53.tinypic/347a8uu.jpg
正如你所看到的,我有一个 body 图像背景。但是,图像未完全显示。
问题:我可以使用CSS做一些事情,以便显示整个图像,或者我需要使用Gimp或photoshop缩小我的图像。目前它是1400 x 1050像素。
解决方案我想你试图使图像适合窗口,即使这意味着图像失真。
您可以使用已经使用的 background-size 属性来实现此目的。但不是 cover ,而是将其设置为 100%100%。实例: jsbin/opokev/21/
body { background:url(i53.tinypic/347a8uu.jpg)no-repeat center fixed; background-position:0px 85px; -webkit-background-size:100%100%; -moz-background-size:100%100%; -o-background-size:100%100%; background-size:100%100%; }
Example: jsbin/opokev/20
Full image: i53.tinypic/347a8uu.jpg
As you can see, I have a body with an offset for the header and the body has an image background. However, the image is not being show in full.
Question: Can I do something with CSS so that the whole image is shown or do I need to use Gimp or photoshop to scale down my image. Currently it is 1400 x 1050 pixels.
解决方案I think you are trying to make the image fit the window even if that means the image is distorted.
You can achieve this with background-size property you have already used. But instead of cover you set it to 100% 100%. Live example: jsbin/opokev/21/
body { background: url(i53.tinypic/347a8uu.jpg) no-repeat center fixed; background-position: 0px 85px; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; }
更多推荐
图片未全部显示在身体背景上
发布评论