背景大小:封面和背景大小之间的区别:包含

在视觉上我可以欣赏它的不同之处,但在哪种情况下我更喜欢一个？是否有任何意义上使用它们或者可以用百分比代替它们？

目前,在使用这些属性时,我似乎无法超越试错方法.

另外,我只能找到相当模糊的解释,特别是我发现W3C文档非常令人费解.

值具有以下含义:

'包含'

缩放图像,同时保持其固有的纵横比(如果有的话)到最大尺寸,使得其宽度和高度都可以适合背景定位区域.

'覆盖'

缩放图像,同时保持其固有的纵横比(如果有的话)到最小尺寸,使得其宽度和高度都可以完全覆盖背景定位区域.

我可能有点厚,但是有人能用相对的例子给我一个简单的英语解释吗？

请使用这个小提琴.谢谢.

CSS

body{
    width:500px;
    height:500px;
    background:url(http://upload.wikimedia.org/wikipedia/commons/1/1a/Bachalpseeflowers.jpg);
    background-size:contain;
    background-repeat:no-repeat;
}

注意

接受的答案是我目前最简洁和完整的答案.谢谢大家的帮助.

您可以考虑查看控制输出的伪代码.分配给图像大小的值直接取决于容器的纵横比和背景图像的纵横比.

注意: Aspect ratio = width / height

包含

if (aspect ratio of container > aspect ratio of image)
    image-height = container-height
    image-width = aspect-ratio-preserved width

else
    image-width = container width
    image-height = aspect-ratio-preserved height

覆盖

if (aspect ratio of container > aspect ratio of image)
    image-width = container width
    image-height = aspect-ratio-preserved height

else
    image-height = container height
    image-width = aspect-ratio-preserved width

你看到了这种关系？在这两个cover和contain,纵横比被保留.但if-else条件在两种情况下都是相反的.

这是cover覆盖整页的原因,没有任何白色部分可见.当容器的纵横比较大时,缩放图像使其宽度等于容器宽度.现在,高度将更大,因为纵横比更小.因此它覆盖整个页面而没有任何白色部分.

问:他们可以用百分比代替吗？

不,不仅仅是百分比.你需要调理.

问:在哪种情况下我更喜欢一个？

在创建网站时,您不希望在固定背景中出现任何白色部分.所以使用cover.

contain在另一可当您使用重复的背景(例如,当你有非常高的纵横比WRT veiwport /容器可以使用的图案图像被用来contain设定和background-repeat到repeat-y).但更合适的用途contain是固定高度/宽度元素.

虽然这个问题假设读者已经理解了工作的价值contain和cover价值background-size,但这里有一个简单的英语解释,即规范所说的内容,它可以作为一个快速入门:

background-size: contain确保整个背景图像适合背景区域,保持其原始宽高比.如果背景区域小于图像,则图像将缩小,以使其适合背景区域.如果背景区域比图像更高或更宽,则未被主图像占据的区域的任何部分将通过重复图像填充,或者如果设置为则填充信箱 /空白.background-repeatno-repeat

background-size: cover使背景图像尽可能大,使其填满整个背景区域,不留空隙.cover和之间的差异在于100% 100%保留了图像的纵横比,因此不会出现图像的不自然拉伸.

请注意,这两个关键字值都不能使用长度,百分比或auto关键字的任意组合来表示.

那你什么时候用另一个呢？就个人而言,我认为cover比实际用途更多contain,所以我会先用它.¹

背景大小:封面

一个常见的用例background-size: cover是全屏布局,其中背景图像细节丰富,例如照片,并且您希望突出显示此图像,尽管是作为背景而不是主要内容.

无论视口的宽高比如何,或者图像或视口是纵向还是横向,您都希望图像能够完全覆盖浏览器视口或屏幕.只要图像填满整个背景区域并保持其原始宽高比,您就不会担心图像的任何部分是否因此而被裁剪掉.

这是一个布局示例,其中内容位于半透明的白色背景中,并悬停在全屏幕背景上.当您增加预览窗格的高度时,请注意图像会自动向上缩放以确保它仍然覆盖整个预览区域.

html {
    height: 100%;
    background-image: url(http://upload.wikimedia.org/wikipedia/commons/1/1a/Bachalpseeflowers.jpg);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

body {
    width: 80%;
    min-height: 100%;
    background-color: rgba(255, 255, 255, 0.5);
    margin: 5em auto;
    padding: 1em;
}