小白教程
所有教程
关于
Search
172.70.126.102
172.70.126.102
参数设置
贡献
退出
操作
编辑
移动
保护
信息
历史
删除
查看“Css3 pr background size”的源代码
本页内容
上一节:
Pr_background_position
下一节:
Pr_border
因为以下原因,您没有权限编辑本页:
您请求的操作仅限属于该用户组的用户执行:
用户
您可以查看和复制此页面的源代码。
{{DISPLAYTITLE:background-size}}[[Category:css animatable|7]] = CSS3 background-size 属性 = 指定背景图像的大小: <sample title="" desc="" lang="html" hererun="1"> div { background:url(img_flwr.gif); background-size:80px 60px; background-repeat:no-repeat; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> body { background:url(/try/demo_source/img_flwr.gif); background-size:80px 60px; background-repeat:no-repeat; padding-top:40px; } </style> </head> <body> <p> Lorem ipsum,中文又称“乱数假文”, 是指一篇常用于排版设计领域的拉丁文文章 ,主要的目的为测试文章或文字在不同字型、版型下看起来的效果。 </p> <p>原始图片: <img src="/try/demo_source/img_flwr.gif" alt="Flowers" width="224" height="162"></p> </body> </html> </run> 在此页底部有更多的例子。 == 浏览器支持 == 表格中的数字表示支持该属性的第一个浏览器版本号。 紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。 {| class="table table-striped table-hover" ! 属性 ! Chrome ! Internet Explorer / Edge ! Firefox ! Safari ! Opera |- | background-size | 4.01.0 -webkit- | 9.0 | 4.03.6 -moz- | 4.13.0 -webkit- | 10.510.0 -o- |} == 标签定义及使用说明 == background-size属性指定背景图片大小。 {| class="table table-striped table-hover" | 默认值: | auto |- | 继承: | no |- | 版本: | CSS3 |- | JavaScript 语法: | object object.style.backgroundSize="60px 80px" |} == 语法 == <pre> background-size: length|percentage|cover|contain;</pre> {| class="table table-striped table-hover" ! 值 ! 描述 |- | length | 设置背景图片高度和宽度。第一个值设置宽度,第二个值设置的高度。如果只给出一个值,第二个是设置为 auto(自动) |- | percentage | 将计算相对于背景定位区域的百分比。第一个值设置宽度,第二个值设置的高度。如果只给出一个值,第二个是设置为"auto(自动)" |- | cover | 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。 |- | contain | 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。 |} == 在线实例 == [[try.php?filename=trycss3_background size2|拉伸背景图像]] 拉伸背景图像完全覆盖内容面积。 [[try.php?filename=trycss3_background size3|四个背景图像图像横向拉伸]] 拉伸4个横向背景图片。 == 相关文章 == CSS3 教程: [[css3 backgrounds|CSS3 背景]]
返回至“
Css3 pr background size
”。
上一节:
Pr_background_position
下一节:
Pr_border