响应全屏幕背景图像，将显示它的所有内容

问题描述：

我有这个jsfiddle：http://jsfiddle.net/mezaxzxd/2/show/ 我想使图像响应的方式，如果我重新调整大小的屏幕所有的图像仍然显示，但在这个演示中，剑和徽标，甚至是时钟的一部分都被隐藏起来了，有没有办法解决这个问题？响应全屏幕背景图像，将显示它的所有内容

HTML

<meta name="viewport" content="width=device-width, initial-scale=1"> 
<body></body>

CSS

body{ 
    background: url('http://i.imgur.com/rZBejVz.png ') no-repeat 50% 80% fixed; 
    background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    -webkit-background-size: cover; 
    }

什么都看不到的的jsfiddle – IsraGab 2015-04-01 07:11:06

检查我的编辑，请 – Sora 2015-04-01 07:13:35

答

我注意到，你的图像的边缘有相同的颜色，因此，你可以使用下面的把戏！

body {background:#525256 url("http://i.imgur.com/rZBejVz.png ") no-repeat center bottom fixed; background-size: contain;}

这里，颜色被用作背景图像&被强制装配在屏幕使用background-size: contain;。从而赋予图像覆盖整个页面的效果！

评分：对于这个技巧的工作，重新确认你的图像边缘具有相同的颜色！

演示，请参阅：http://jsfiddle.net/mezaxzxd/4/

这是一个不错的小技巧，虽然我可以在我的情况，因为我想要的徽标和剑不使用它在屏幕的左侧和右侧角落 – Sora 2015-04-01 07:17:57

@Sora，但是在左右角落！你是说左边和右边的底角？ – demonofthemist 2015-04-01 07:19:26

是啊我的意思是左和右下角正好 – Sora 2015-04-01 07:20:03

响应全屏幕背景图像，将显示它的所有内容

相关推荐