小程序 背景图大小设置大小_背景大小问题

小程序 背景图大小设置大小

It's something that makes all men live in fear, and are often uncertain of. It's never spoken, but the curiosity is always there. Nine out of ten women agree in the affirmative. Advertisers do their best to make us feel inadequate but tell us it can improve. Yes gentlemen...it appears that size matters.

这使所有人都生活在恐惧中，并且常常不确定。 它从未说过，但好奇心始终存在。 十分之九的妇女赞成。 广告客户尽最大努力使我们感到不足，但告诉我们它可以改善。 是的，先生们……看起来大小很重要。

background-size, that is. The background-size CSS property allows developers to designate the size at which a background-image should appear within an element. MooTools Developer Christoph Pojer employs the background-size technique on his website, allowing for his masthead to look "full" on browsers of all sizes, even mobile. Let's look at how to use the mystical background-size property.

background-size ，即。 background-size CSS属性允许开发人员指定背景图像应出现在元素中的大小。 MooTools开发人员Christoph Pojer 在他的网站上采用了background-size技术 ，使标头在各种尺寸的浏览器(甚至是移动设备)上看起来都“完整”。 让我们看一下如何使用神秘的background-size属性。

View Demo 观看演示

background-size CSS (background-size CSS)

The background-size property has a few predefined values and then the usual numeric-based values:

background-size属性具有一些预定义值，然后是通常的基于数字的值：

• contain: Ensures that the entire background-image will display by showing the image at a scaled size.

  包含：通过按比例显示图像来确保显示整个背景图像。

• cover: Scales the background image so that the smallest dimension reaches the maximum width/height of the element.

  cover：缩放背景图像，以使最小尺寸达到元素的最大宽度/高度。

• length/percentage: Any custom numeric size

  长度/百分比：任何自定义数字大小

Believe it or not, the fun part is assigning the length and percentage sizes. Here are some examples of the different usages of background-size:

信不信由你，有趣的部分是分配长度和百分比大小。 以下是background-size不同用法的一些示例：

/* base header classes */
#header {
	/* header dimension! */
	height: 350px;
	
	/* additional background properties */
	background-repeat: no-repeat;
	background-position: center center;
	
	/* some box shadow for good fun */
	box-shadow: rgba(0,0,0,0.20) 0 10px 10px;
}

/* cover */
#header.flex {
	/* size matters */
	background-size: cover;
}

/* contain */
#header.flex {
	/* size matters */
	background-size: contain;
}

/* flex, fun */
#header.flex {
	/* size matters */
	background-size: 100% auto;
}

Christoph's website uses the last example, allowing for a great view of the JavaScript fanboy at all browser sizes. Check out my demos to see

Christoph的网站使用了最后一个示例，从而使所有浏览器尺寸JavaScript迷都可以一览无余。 查看我的演示以查看

View Demo 观看演示

The subtle awesomeness provided by using background-size is somewhat amazing. I'm usually quite skeptical of window size and resize effects but this technique helped me to see the value and ease in working with fixed dimensions and variable effects based on client browser size. background-size is supported in Firefox, Safari, Chrome, Opera, and IE9+.

使用background-size提供的微妙效果令人惊叹。 我通常对窗口大小和调整大小效果持怀疑态度，但是这种技术帮助我了解了基于客户端浏览器大小的固定尺寸和可变效果的价值和易用性。 Firefox，Safari，Chrome，Opera和IE9 +支持background-size 。

What do you think about this technique -- neat trick or useful tool? Would you use this on your personal website? How about a business website?

您如何看待这项技术-巧妙的技巧或有用的工具？ 您会在您的个人网站上使用它吗？ 商业网站如何？

Photos featured in this post were taken in London during the MooTools Hackathon.

这篇文章中的特色照片是在MooTools Hackathon期间在伦敦拍摄的。

翻译自: https://davidwalsh.name/background-size

小程序 背景图大小设置大小