- 1、本文档共6页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
CSS背景颜色 背景图片 居中 重复 固定样式background经验篇CSS背景颜色 背景图片 居中 重复 固定样式background经验篇
CSS背景颜色 背景图片 居中 重复 固定样式background经验篇
Background?CSS背景图片与CSS背景颜色样式技术经验篇我们使用CSS Background样式属性,可以设置网页背景单一颜色、网页背景为图片、网页背景图片居中于网页、网页背景图片网页固定位置、网页背景图片中网页中重复平铺等css背景样式介绍与案例讲解。
扩展阅读:CSS背景Background基础:/rumen/r125.shtml
背景颜色背景图片目录
CSS背景background图片
CSS背景颜色
背景为颜色与为图片总结
一、CSS背景background图片 ?
1、背景图片语法background-image:url() 引入背景图片background-repeat:no-repeat 设置背景图片是否重复平铺background-position:left top 设置图片的css背景定位,left代表靠左,top代表靠上
简写背景图片语法:background:url(图片地址) no-repeat left top
2、背景图片设置Body{background:url(/img201301/divcss5-logo-2013.gif) no-repeat 0 0 }这里设置了图片“/img201301/divcss5-logo-2013.gif”作为网页背景不重复并靠上靠左显示。,
3、CSS背景图居中
横向居中:background:url(图片地址) no-repeat center top
纵向居中:background:url(图片地址) no-repeat left 50%这里50%是随意设置考上为50%距离,细节具体上下垂直居中需要再通过百分比均衡设置。
4、背景图片一般案例Body设置网页背景css代码body{background:url(/img201301/divcss5-logo-2013.gif) no-repeat 0 0}
CSS图片背景案例截图
不重复也不平铺图片背景截图
5、div css背景图片居中Css背景图片居中代码:body{background:url(/img201301/divcss5-logo-2013.gif) no-repeat center 0}这里我们用了“center ”居中属性,更多详情可进入css 背景了解基础
居中截图
背景图片居中于网页截图
6、背景图片横向平铺
CSS背景X横向平铺代码:body{background:url(/img201301/divcss5-logo-2013.gif) repeat-x}
案例截图:
Y轴横向平铺图片背景截图
7、背景图片纵向平铺
CSS背景Y纵向平铺代码:body{background:url(/img201301/divcss5-logo-2013.gif) repeat-y}
平铺重复图片背景效果截图:
纵向Y轴方向垂直平铺图片背景截图
8、全网页背景图片重复平铺
图片背景全屏网页重复平铺关键代码:body{background:url(/img201301/divcss5-logo-2013.gif)}
截图:
图片作为背景全屏平铺显示截图
说明:这里没有设置是否重复,是否居左居右,只设置背景引入图片即可简便地实现图片自然全屏平铺
二、CSS背景颜色 ?
1、background背景颜色语法
background:#FFF.divcss5{background:#FFF}
设置了divcss5对象背景为白色
2、背景颜色案例
假如我们设置网页背景全部为白色,文字颜色为白色
1)、对应背景颜色CSS代码与HTML源代码:
!DOCTYPE?html?
html?
head?
meta?http-equiv=Content-Type?content=text/html;?charset=utf-8?/?
title无标题文档/title?
style?
body{background:#000;?color:#FFF}?
/style?
/head?
body?
DIVCSS5?背景为黑色;文字颜色为白色?
/body?
/html?
2)、背景颜色与文字颜色案例截图
CSS设置背景颜色与CSS字体颜色
如果想了解CSS背景颜色与CSS图片背景同时设置background基础进入:/rumen/r125.shtml
三、背景为颜色与为图片总结 ?
我们使用css background设置图片为网页背景,图片为网页背景各种样式,包括了是否背景图片居中,是否背景图片重复平铺显示、是否固定背景图片位置等背景样式,以上知识点与案例点希望大家自己复制以上代码实践观察
您可能关注的文档
- CompTIA 证书申请指引手册CompTIA 证书申请指引手册.pdf
- COM技术COM技术.ppt
- ControlLogix控制系统在煤气加压站的应用实践ControlLogix控制系统在煤气加压站的应用实践.doc
- COOLMOS-超结场效应管产品表COOLMOS-超结场效应管产品表.pdf
- Coursera台大机器学习基础课程学习笔记1Coursera台大机器学习基础课程学习笔记1.doc
- CPA 《公司战略与风险管理》 张英奎 习题班 第一章 战略与战略管理 48页CPA 《公司战略与风险管理》 张英奎 习题班 第一章 战略与战略管理 48页.pdf
- CorelDRAW入门篇-21交互式变形和封套效果CorelDRAW入门篇-21交互式变形和封套效果.ppt
- CPA《会计》学习笔记-第二十章所得税03CPA《会计》学习笔记-第二十章所得税03.pdf
- CPA 《财务成本管理》刘成举 习题班 第十八章CPA 《财务成本管理》刘成举 习题班 第十八章.pdf
- CPA 《财务成本管理》 刘成举 习题班 第十四段CPA 《财务成本管理》 刘成举 习题班 第十四段.pdf
- 2024年江西省寻乌县九上数学开学复习检测模拟试题【含答案】.doc
- 2024年江西省省宜春市袁州区数学九上开学学业水平测试模拟试题【含答案】.doc
- 《GB/T 44275.2-2024工业自动化系统与集成 开放技术字典及其在主数据中的应用 第2部分:术语》.pdf
- 中国国家标准 GB/T 44275.2-2024工业自动化系统与集成 开放技术字典及其在主数据中的应用 第2部分:术语.pdf
- GB/T 44285.1-2024卡及身份识别安全设备 通过移动设备进行身份管理的构件 第1部分:移动电子身份系统的通用系统架构.pdf
- 《GB/T 44285.1-2024卡及身份识别安全设备 通过移动设备进行身份管理的构件 第1部分:移动电子身份系统的通用系统架构》.pdf
- 中国国家标准 GB/T 44285.1-2024卡及身份识别安全设备 通过移动设备进行身份管理的构件 第1部分:移动电子身份系统的通用系统架构.pdf
- GB/T 44275.11-2024工业自动化系统与集成 开放技术字典及其在主数据中的应用 第11部分:术语制定指南.pdf
- 中国国家标准 GB/T 44275.11-2024工业自动化系统与集成 开放技术字典及其在主数据中的应用 第11部分:术语制定指南.pdf
- 《GB/T 44275.11-2024工业自动化系统与集成 开放技术字典及其在主数据中的应用 第11部分:术语制定指南》.pdf
文档评论(0)