CSS从基础到熟练学习笔记(三)CSS中的5种背景属性(背景颜色、背景图片、固定背景图片等)
2016-11-20 15:06
921 查看
CSS背景属性用于定义元素的背景效果,常用的有5种背景属性:背景颜色、背景图片、背景图片重复展示的方式、背景附着的方式以及背景位置
background-color
background-image
background-repeat
background-attachment
background-position
CSS中可以通过background-color属性指定元素的背景颜色,例如指定body元素的背景颜色:
颜色的表示方式也有3中,具体可参见RGB颜色对照表以及详细介绍CSS中的三种颜色表示方式
语法background-image: url| none| initial| inherit;
属性值:
url(‘URL’) 背景图片的地址,多张背景图片可以使用逗号隔开
none 默认值,无背景
initial 将此属性设置为其默认值
inherit 从它的父元素继承这个属性
例如:
属性值:
repeat 默认值,水平、垂直均重复
repeat-x 水平重复
repeat-y 垂直重复
no-repeat 不重复,仅仅展示一次
initial 将此属性设置为其默认值
inherit 从它的父元素继承这个属性
例如:
属性值:
left top 左上角,如果仅仅制定一个值,则另一个值默认为center,即left <=> left center。类似的方式还有left center、left bottom、right top、right center、right bottom、center top、center center和center bottom等
x% y% 第一个值代表水平位置,第二个值代表垂直位置。例如:left corner 等价于0% 0%。right bottom 等价于100% 100%。如果仅仅制定一个值,则另一个默认为50%。 该属性默认值为0% 0%。
Xpx Ypx 也可以使用像素指定位置,或者像素值和百分比值混合使用
initial 将此属性设置为其默认值
inherit 从它的父元素继承这个属性
例如:
语法: background-attachment: scroll| fixed| local| initial| inherit;
属性值:
scroll 随元素一起滚动,默认值。如果背景在页顶,则页面拉到页脚时看不到页顶元素也就看不到图片了。
fixed 固定背景背景图片,使用该值时,背景图片会一直在固定位置显示。
local 背景沿元素的内容滚动
initial 将此属性设置为其默认值
inherit 从它的父元素继承这个属性
例如,背景图片一直显示在右上角:
background-color
background-image
background-repeat
background-attachment
background-position
背景颜色background-color
(本文章分享在CSDN平台,更多精彩请阅读 东陆之滇的csdn博客:http://blog.csdn.net/zixiao217 ,如在其他平台看到此文可能会出现内容不完整的现象,请移至东陆之滇http://blog.csdn.NET/zixiao217查看原文)CSS中可以通过background-color属性指定元素的背景颜色,例如指定body元素的背景颜色:
body { background-color: lightblue; }
颜色的表示方式也有3中,具体可参见RGB颜色对照表以及详细介绍CSS中的三种颜色表示方式
背景图片background-image
CSS通过background-image属性指定元素的背景图片。语法background-image: url| none| initial| inherit;
属性值:
url(‘URL’) 背景图片的地址,多张背景图片可以使用逗号隔开
none 默认值,无背景
initial 将此属性设置为其默认值
inherit 从它的父元素继承这个属性
例如:
body { background-image: url("https://img-blog.csdn.net/20161118220122095"); }
背景图片显示方式background-repeat
CSS通过background-repeat属性指定背景图片的展示方式。属性值:
repeat 默认值,水平、垂直均重复
repeat-x 水平重复
repeat-y 垂直重复
no-repeat 不重复,仅仅展示一次
initial 将此属性设置为其默认值
inherit 从它的父元素继承这个属性
例如:
body { background-image: url("https://img-blog.csdn.net/20161118220122095"); background-repeat: no-repeat; }
如何定位背景图像background-position
CSS可以通过background-position属性指定背景图片的位置。默认值为0% 0%属性值:
left top 左上角,如果仅仅制定一个值,则另一个值默认为center,即left <=> left center。类似的方式还有left center、left bottom、right top、right center、right bottom、center top、center center和center bottom等
x% y% 第一个值代表水平位置,第二个值代表垂直位置。例如:left corner 等价于0% 0%。right bottom 等价于100% 100%。如果仅仅制定一个值,则另一个默认为50%。 该属性默认值为0% 0%。
Xpx Ypx 也可以使用像素指定位置,或者像素值和百分比值混合使用
initial 将此属性设置为其默认值
inherit 从它的父元素继承这个属性
例如:
body { background-image: url("https://img-blog.csdn.net/20161118220122095"); background-repeat: no-repeat; background-position: center }
背景图片附着状态background-attachment
CSS使用 background-attachment属性指明 背景附件属性来设置背景图像是否是固定的或是与页面的其余部分一起滚动。语法: background-attachment: scroll| fixed| local| initial| inherit;
属性值:
scroll 随元素一起滚动,默认值。如果背景在页顶,则页面拉到页脚时看不到页顶元素也就看不到图片了。
fixed 固定背景背景图片,使用该值时,背景图片会一直在固定位置显示。
local 背景沿元素的内容滚动
initial 将此属性设置为其默认值
inherit 从它的父元素继承这个属性
例如,背景图片一直显示在右上角:
body { background-image: url("https://img-blog.csdn.net/20161118220122095"); background-repeat: no-repeat; background-position: right top background-attachment: fixed }
相关文章推荐
- CSS从基础到熟练学习笔记(二) RGB颜色对照表以及详细介绍CSS中的三种颜色表示方式
- HTML&CSS基础学习笔记1.30-颜色的表达
- HTML&CSS基础学习笔记2-Html的全局属性
- CSS背景颜色、背景图片、平铺、定位、固定
- css基础学习之文本和颜色属性
- CSS基础学习2-CSS设置颜色与背景
- CSS学习笔记(五)背景图基础
- CSS学习笔记 -- day01 CSS简介、常见属性、基础选择器
- HTML&CSS基础学习笔记1.9-添加图片
- css基础学习----背景属性
- CSS学习笔记之背景属性
- Css基础学习(五)—颜色、背景与图像
- HTML&CSS基础学习笔记9-添加图片
- <学习CSS>第三天笔记-css外观属性(颜色、行间距、对齐、首行缩进、字间距、单词间距 、颜色半透明、阴影)快捷方式、综合案例、引入CSS样式表(内部样式表、行内式、外部样式表)、三种样式表总结
- CSS从基础到熟练学习笔记(一)引入CSS样式的三种方式以及多种样式的优先级
- HTML&CSS基础学习笔记1.28-颜色的表达
- 【Web前端笔记】css让背景图片拉伸填充的属性
- CSS学习笔记-----简单的列表和背景图片
- Css基础学习一:字体,文本,颜色,背景,边框,边距
- H5学习笔记——CSS文本设置属性&颜色表示法