• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > css 如何让背景图片拉伸填充避免重复显示

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

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含背景图片,拉伸填充等相关知识,佚名 希望在学习及工作中可以帮助到您
如何让背景图片拉伸填充,这个问题听起来似乎很简单。但是很遗憾的告诉大家。不是我们想的那么简单。
比如一个容器(body,div,span)中设定一个背景。这个背景的长宽值在css2.1之前是不能被修改的。
所以实际的结果是只能重复显示,所以出现了repeat,repeat-x,repeat-y,no-repeat这些属性。就是用来控制背景图片的显示的。所以一般用作背景图片的有2类:

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

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

具体使用方法如下:
背景图尺寸(数值表示方式):

您可能想查找下面的文章:

  • HTML5画渐变背景图片并自动下载实现步骤
  • css 如何让背景图片拉伸填充避免重复显示
  • css 如何让背景图片拉伸填充避免重复显示_html5教程技巧
  • HTML5画渐变背景图片并自动下载实现步骤_html5教程技巧

相关文章

  • 2018-12-03总结关于内联SVG注意点汇总
  • 2018-12-03用HTML5 实现橡皮擦的涂抹效果的教程_html5教程技巧
  • 2018-12-03HTML5 WebGL打印3D机房
  • 2018-12-03使用cocos2D游戏引擎开发游戏的话,是选择使用cocos2D-x使用C++来编写,还是使用cocos2D-html5来编程,原因是什么?
  • 2018-12-03html5中页面可见性的判断(附代码)
  • 2017-08-06一个不错的HTML5 Canvas多层点击事件监听实例
  • 2018-12-03HTML5的下拉框应该如何增加用户体验
  • 2018-12-03随着HTML5的发展和微信应用号的出现,如何看待未来移动开发着的定位?
  • 2018-12-03 HTML5上传视频无法播放以及兼容的解决方法(图)
  • 2018-12-03浅析移动设备HTML5页面布局 _html5教程技巧

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 利用HTML5 Canvas API绘制矩形的超级攻略_html5教程技巧
    • 热炒的前端什么时候能冷静下来?
    • HTML5重塑Web世界它将如何改变互联网_html5教程技巧
    • HTML5 visibilityState属性详细介绍和使用实例_html5教程技巧
    • 基于canvas的纯JS二维码生成插件
    • CSS3的文字阴影—Text-Shadow
    • 利用HTML5 Canvas制作一个简单的打飞机游戏_html5教程技巧
    • 什么是消息通信?关于消息通信的实例汇总
    • 详解使用HTML5 Canvas创建动态粒子网格动画的示例代码分享
    • HTML5: Web 标准最巨大的飞跃

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有