background-origin: border-box; 从边框区域开始显示背景,背景会延伸到外边界的边框,但边框在上,背景在下。 background-origin: padding-box; 从补白区域开始显示背景,背景延伸到最外边界的padding,边框不会有背景出现。 background-origin: content-box; 仅在内容区显示背景。 background-clip:指定背景的裁剪区域。
盒模型主要定义四个区域:内容(content)、内边距(padding)、边框(border)和外边距(margin)。对于初学者,经常会搞不清楚margin,background-color,background-image,padding,content,border之间的层次、关系和相互影响。这里提供一张盒模型的3D示意图,希望便于你的理解和记忆。 margin:层的边框以外留的空白 background-col...
盒模型主要定义四个区域:内容(content)、内边距(padding)、边框(border)和外边距(margin)。对于初学者,经常会搞不清楚margin,background-color,background-image,padding,content,border之间的层次、关系和相互影响。这里提供一张盒模型的3D示意图,希望便于你的理解和记忆。 margin:层的边框以外留的空白 background-col...
1. background-color - 背景颜色 2. background-image - 背景图片 3. background-repeat - 背景图片重复 4. background-position - 背景图片位置 5. 组合使用背景属性 三、盒模型属性 1. margin - 外边距 2. padding - 内边距 3. border - 边框 4. width/height - 宽度和高度 四、布局 1. display ...
1.padding-box : 从padding区域开始显示背景图像。(默认值) 2.border-box : 从border区域开始显示背景图像。 3.content-box : 从content 区域开始显示背景图像 九、复合属性 语法:background : [background-color]背景颜色 | [background-image] 背景图片| [background-position]背景定位 | [background-size]背...
background 的常见背景属性 css2.1中,常见的背景属性有以下几种:(经常用到,要记住) background-color:#ff99ff;设置元素的背景颜色。 background-image:url(images/2.gif);将图像设置为背景。 background-repeat: no-repeat;设置背景图片是否重复及如何重复,默认平铺满。(重要) ...
(1)background-image:可添加多张背景图片。 参数:url() || none(默认) background-image: url(images/scroll_top.jpg), url(images/scroll_bottom.jpg), url(images/scroll_middle.jpg); 注意:背景图不占位置(不受padding的影响), img插入图片才占位且有4像素的距离,即背景图不能撑出高度。4像素的距离用...
body {margin: 0;padding: 0;}div {position: absolute;height: 100vh;width: 100vw;}.day {background-image: url("https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2613&q=80");background-size: cover;background...
background-image用于给盒子添加图片的背景修饰,默认加载到边框及以内部分,如果图片不重复加载,则加载从border以内开始,属性值是url(图片路径),uniform resource locator,统一资源定位符,括号内书写查找图片的路径。 背景图和背景颜色可以同时设置,背景图会压盖背景颜色,没有背景图的区域会显示背景颜色。
background 是以下属性的缩写,background-size属性值只能写在background-position属性值的后面,并且使用斜杠分隔。 背景图片/渐变 background-image 背景图片 /* url 函数里的图片路径无需引号 */ background-image: url(./ecLogo.jpg); 1. 2. 【实战】背景图片自适应全屏 ...