background相关属性

background-origin: 规定 background-position 属性相对于容器的哪一部分来定位。

　　padding-box 背景图像相对于内边距框来定位；（默认）

　　border-box背景图像相对于边框盒来定位；

　　content-box背景图像相对于内容框来定位。

background-position：设置背景图像在容器显示的起始位置。

　　默认值：0 0（从背景图的左上点开始显示）；

　　取值:Int px Int px;背景图的左上定点在容器的坐标位置，可以为负值。负值表示背景图左上点不在容器内，超出的部分隐藏。

　　如果只设置一个值，另一个值将为“居中”（50%/center）

　　如果采用百分数，则按如下公式计算坐标：

　　x：(容器的宽度—背景图片的宽度)*x百分比，超出的部分隐藏;y：(容器的高度—背景图片的高度)*y百分比，超出的部分隐藏。

　　所以left/top等价于0%，right/bottom等价于100%（背景图的右边/底边和容器重合），center等价于50%（背景图在容器中间）。

background-size:设置背景图的大小（IE8不支持此属性）

　　百分比/length：若为百分数，背景图的尺寸为容器乘以百分数的乘积。只设一个，第二个为auto（以保持和原始背景图一样的长宽比例）。

　　如果都设为100%，则背景图会铺满容器，但长宽比率会发生变化。

　　contain:容器按背景图的固定比例包含整个背景图。背景图的尺寸以背景图按固定比例放大，其任意一条边到达容器的边界为止，经常会导致另一边空白(有no-repeat时)。

　　cover:背景图按固定长宽比放大，至填充满整个容器为止（背景图短一点的那条边也到达容器边界）。有一部分的背景图会因超出容器而被切除。

IE8兼容：

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='绝对路径',sizingMethod='scale/crop');

　　crop : 背景图大小不变，剪切图片以适应区域尺寸。

　　image : 默认值。增大或减小区域的尺寸边界以适应背景图的尺寸，相当于overflow：visible的效果。

　　scale : 缩放背景图以适应区域的尺寸边界。

　　①不能指定任意大小background百分比②只适于单张图片不能使用图片精灵等拼图③要引用绝对路径图片④兼容ie7，8

转载于:https://www.cnblogs.com/kevin2chen/p/6547574.html

background相关属性相关推荐

【CSS】background相关属性深入学习
最近一次需求中对于background相关的一些属性使用较多,总结下,希望提高下次的开发效率 background属性 background-color background-image backgr ...
css与背景相关的属性有哪些,css的背景background的相关属性
今天需要做一个占满设备宽度的轮播图,这里作为demo仅展示一张图,下面分别是要操作的图片(这里做了缩放处理,实际的图比较大),以及要实现的效果图,很明显两者是不成比例的: (图一) (图 ...
复习-css列表和表格相关属性
css列表和表格相关属性 list-style:设置所有列表属性 list-style-image:将图像设置为列表项标记,主要有url值 list-style-position:设置列表项标记的放置 ...
html盒子页面居中,网页布局盒子(box)相关属性和盒子居中
网页布局中盒子的相关属性: 一.盒子的基础属性: 1.width和height:设置盒子的宽度和高度:常见单位:px,em,rem,vh/vm等 2.background:color(设置背景颜色), ...
Web:flex模拟移动商城首页页面布局/grid布局的相关属性
flex模拟移动商城首页页面布局 1.布局页面导航大家可以看到图片上的红色边框,用了flex布局,布局了一个多行容器,采用的是无序列表ul. css代码块 /* 设置导航样式,定义flex容器 */ ...
CSS 动画相关属性动态实例大全（82种），2023年祝福第二弹（送你一只守护兔）(下），守护兔源代码免费下载
2023年春节祝福第二弹--送你一只守护兔(下) CSS 动画相关属性动态实例大全(82种).守护兔源代码免费下载本文目录: 五.CSS3 动画相关属性实例大全 (1).CSS3的动画基本属性 (2 ...
Android 相关属性
TextView: Android:layout_gravity="center_vertical" 设置控件显示的位置:默认top,这里居中显示,还有bottom android ...
css动画相关属性详解
css动画相关属性详解文章目录 css动画相关属性详解什么是CSS动画? 一.@keyframes规则二.延迟动画-animation-delay 三.设置动画应运行多少次animation-i ...
linux查看nginx运行状态,如何查看nginx运行状态及相关属性说明
如何查看nginx运行状态及相关属性说明. 需要查看nginx是否已经加载了 http_stub_status_module模块 /usr/sbin/nginx -V 查看nginx的安装状态 ng ...
【约束布局】ConstraintLayout 屏障 Barrier 约束 ( 简介 | 屏障适用场景 | 位置说明 | 相关属性 | 可视化操作 | 代码示例 | 总结 )
文章目录 I . 屏障 Barrier 约束简介 II . 屏障线 Barrier 与引导线 Guideline 对比 III . 屏障 Barrier 适用场景 IV . 屏障 Barrier ...

background相关属性

background相关属性相关推荐

最新文章

热门文章