网站建设
 
设为首页 收藏本站 
用户ID/邮箱: 密 码:
客户中心 Customer service 您目前的位置:首 页 > 客户中心 > DIV+CSS 



DIV+CSS,网站建设DIV+CSS:css 如何让背景图片拉伸填充避免重复显示

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

如何让背景图片拉伸填充,这个问题听起来似乎很简单。但是很遗憾的告诉大家。
不是我们想的那么简单。  比如一个容器(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;  
}  

  


上一条: 公司如何建立网站?建站前需要注意事项
下一条: 浏览器兼容问题与解决方法
相关文章
css常用属性总结之 id和class的区别,使用类还是ID?
关于左边固定,右边自适应布局的响应式布局写法
html实现 页面禁止右键 禁止复制 禁止图片拖动 禁止复制和剪切
前端页面隐藏元素
URL怎么优化
URL优化方法
css中的三种基本定位机制
css常用属性总结之 id和class的区别,使用类还是ID?
关于左边固定,右边自适应布局的响应式布局写法
html实现 页面禁止右键 禁止复制 禁止图片拖动 禁止复制和剪切
aaaa
推广经验分享
其它
网站建设资源
常见问题
网站知识
快速导航 Fast Navigation
网站建设投诉建议
投诉建议
网站建设客户服中心
客服中心
网站建设付款中心
付款方式
网站优化中心
网站优化
网站建设套餐
网站建设

网站价值

轻松一刻
站长工具
站长工具

积分兑换
网站首页关于我们业务范围新闻资讯成功案例客服中心联系我们深圳网站建设网站优化付款帐户
文档下载:网站建设服务协议 | 网站建设报价 | 网站备案资料 | 网页设计软件 | PhotoShop(图片处理) | FTP网页上传/下传软件
深圳网站建设公司专业提供各种营销型网页设计\网站优化服务... 【老字号】、重庆、广州、东莞、深圳网站建设
网页设计登陆 | 网站建设 | 网页设计 | 网站优化 | 网站地图 | 专业的深圳网站建设,深圳网站优化,网页设计,网站建设开发团队
COPYRIGHT(C) 2005-2018 亚网互联·中国 版权所有 ALL RIGHTS RESERVED  ( 粤ICP备15005241号 ) 来访IP:3.94.196.192
深圳网站建设公司地址:深圳市宝安区龙华民治大道东明大厦1529-1531 室     E-Mail:sales@yanet.cn   web@yanet.cn  
公司电话:0755-89812581(8线)   4006-800535
深圳市博士通科技有限公司