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

css 如何让背景图片拉伸填充避免重复显示_html5教程技巧

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含背景图片,拉伸填充等相关知识,匿名希望在学习及工作中可以帮助到您
如何让背景图片拉伸填充,这个问题听起来似乎很简单。但是很遗憾的告诉大家。不是我们想的那么简单。
比如一个容器(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-03ios/andriod开发和web前端选择哪个?
  • 2018-12-03HTML5 实战PHP之Web页面表单设计_html5教程技巧
  • 2018-12-03不刷新的前提下怎样改变当前url的代码
  • 2018-12-03HTML5游戏框架cnGameJS开发实录-游戏场景对象
  • 2017-08-06解决Firefox下不支持outerHTML问题代码分享
  • 2018-12-03HTML5结合互联网+ 实现的3D隧道(附代码)
  • 2018-12-03详解H5的自定义属性data-*
  • 2018-12-03基于HTML5陀螺仪实现移动动画效果
  • 2018-12-03html5 Canvas实现画未闭合的路径及渐变色的填充方法
  • 2017-08-06深入解析HTML5使用SVG图像时的viewBox属性用法

文章分类

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

最近更新的内容

    • HTML5游戏开发开源库件lufylegend1.4.0发布,新增物理引擎Box2dWeb封装和缓动类TweenLite
    • HTML5资源预加载(Link prefetch)详细介绍(给你的网页加速)
    • HTML5新标签之Canvas详细介绍
    • 在webstorm中使用H5的快捷键
    • html5如何制作一份邀请函?制作邀请函的方法(代码示例)
    • 使用canvas画“哆啦A梦”时钟的代码
    • html5获取手机GPS信息的示例代码分享
    • HTML5 canvas画布详解(四)
    • html5 自定义播放器核心代码
    • 绝对零基础,选择做 HTML5 还是 iOS 应用?

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

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