欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > html5案例分享 >

Css 怎样让配景图片拉伸添补停止一再表现

发布时间:2016-11-26  编辑:杨雨个人博客网站   点击:   

怎样让配景图片拉伸添补,这个题目听起来好像很简朴。可是很遗憾的汇报各人。不是我们想的那么简朴。
好比一个容器(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;
}
本文地址:http://itbyc.com/web/html5/13362.html
转载请注明出处。
分享是一种快乐,也是一种美德:
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1