博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS3:backgroud-size和background-origin的使用方法
阅读量:6881 次
发布时间:2019-06-27

本文共 573 字,大约阅读时间需要 1 分钟。

backgroud-size

CSS3以前,背景图像大小由图像的实际大小决定,background-size指定背景图像的大小。

你可以指定像素或百分比大小,你指定的大小是相对于父元素的宽度和高度的百分比的大小。默认值为图片的实际尺寸。

例如:图片的实际大小为220*150像素,在CSS3之前该图片只能填充比它小的元素,要想“完全”填充更大的元素就只能使用background-repeat了。

background-origin

background-origin属性指定了背景图像的位置区域。content-box, padding-box和 border-box区域内可以放置背景图像。默认值为content-box。

百分比的参照物由background-origin决定:

  • 若值为content-box,100%为元素的width;
  • 若值为padding-box,100%为元素的width+padding;
  • 若值为border-box,100%为元素的width+padding+border-width。

示例1

元素

实际效果如下图:

示例2:多背景图片

元素

效果如下图:

转载于:https://www.cnblogs.com/rainman/p/5183045.html

你可能感兴趣的文章
ES6学习文档(更新至第7节)
查看>>
再次理解伪类选择器:nth-child(){……}
查看>>
MongoDB 在windows服务器安装部署与远程访问配置
查看>>
自定义兼容IE8的复选框
查看>>
开源大数据周刊-第68期
查看>>
区块链100讲:如果连电子钱包都不懂,还谈什么区块链开发(有彩蛋)
查看>>
Java NIO(八) FileChannel
查看>>
打破铁三角:新的项目管理角度
查看>>
Java虚拟机07——类加载器与双亲委派模型
查看>>
iOS实现类似苹果手机原生的锁屏界面(数字密码)
查看>>
express框架链接池的使用
查看>>
基于Transform实现更高效的组件化路由框架
查看>>
24 个实例入门并掌握「Webpack4」(三)
查看>>
linux网卡配置
查看>>
一个有趣的Js逗号表达式
查看>>
node服务适配前端路由
查看>>
[vue] 表单输入格式化,中文输入法异常
查看>>
three.js 专题
查看>>
Observer观察者模式与OCP开放-封闭原则
查看>>
多端异构数据集成方案
查看>>