css 如何让背景图片拉伸填充避免重复显示

名站网址导航名站网址导航小编为爱好网页hTML5的朋友提供关于网页hTML5的相关知识。

本篇文章的具体介绍如下

如何让背景图片拉伸填充，这个问题听起来似乎很简单。但是很遗憾的告诉大家。不是咱们想的那么简单。
比如一个容器（body,div,span）中设定一个背景。这个背景的长宽值在css2.1之前是不能被修改的。
所依实际的结果是只能重复显示，所依出现了repeat,repeat-x,repeat-y,no-repeat这些属性。就是用来控制背景图片的显示的。 所依一般用作背景图片的有2类：

1.是一整张大图，尺寸和区域大小刚好吻合
2.一个很小的条状图，通过repeat后，形成一个很规则的大图背景。

但是css3出现以后，这个情况被改善了。background-size 属性可以让咱们之前的希望成真。
而且这个属性在firefox，chrome，以及ie9上都可以使用。

具体使用实用具体的方法如下：
背景图尺寸（数值表示方式）：

复制具体代码具体代码如下:
#background-size{
background-size:200px 100px;
}

背景图尺寸（百分比表示方式）：

复制具体代码具体代码如下:
#background-size2{
background-size:30% 60%;
}

背景图尺寸（等比扩展图片来填满网页元素，即cover值）：

复制具体代码具体代码如下:
#background-size3{
background-size:cover;
}

背景图尺寸（等比缩小图片来适应网页元素的尺寸，即contain值）：

复制具体代码具体代码如下:
#background-size4{
background-size:contain;
}

背景图尺寸（以图片自身大小来填充网页元素，即auto值）：

复制具体代码具体代码如下:
#background-size5{
background-size:auto;
}

html5记忆翻牌游戏实现思路及具体代码
翻开的2张牌如果配对就会消除，否则2张牌都会返回背面。需求分析怎么绘制正的牌面和背的牌面及配对成功后怎么消除牌面怎么生成牌组并且确定每张牌的位置和对应的图片怎么洗牌怎么记录牌组的配对信息怎么确定点击事件是第一次点击还是第二次点击作弊事件的处理：两次点击同一张牌点击已经消除的牌面点击牌面之外的区域牌翻开之后需要给一定时间让玩家看清楚，怎么实现暂停鼠标点击事件的响应及获得鼠标点击位置的坐标从而确定点击的是哪一张牌 MYCode:

关于网页hTML5的相关知识就说到这里希望可以帮助朋友们。,背景图片,拉伸填充