图片未全部显示在身体背景上

本文介绍了图片未全部显示在身体背景上的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

示例： 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%; }