html背景图片横屏,css背景颜色 背景图片 居中 重复 固定样式background经验篇 -凯发k8官方网
我们使用css background样式属性，可以设置网页背景单一颜色、网页背景为图片、网页背景图片居中于网页、网页背景图片网页固定位置、网页背景图片中网页中重复平铺等css背景样式介绍与案例讲解。
扩展阅读：css背景background基础：http://www.divcss5.com/rumen/r125.shtml
背景颜色背景图片目录
css背景background图片
css背景颜色
背景为颜色与为图片总结
一、css背景background图片 - top
1、背景图片语法
background-image: 引入背景图片
background-repeat:no-repeat 设置背景图片是否重复平铺
background-position:left top 设置图片的css背景定位，left代表靠左，top代表靠上
简写背景图片语法：
background: no-repeat left top
2、背景图片设置
body{background:url(/uploads/image/wimg201301/divcss5-logo-2013.gif) no-repeat 0 0 }
这里设置了图片“http://www.divcss5.com/img201301/divcss5-logo-2013.gif”作为网页背景不重复并靠上靠左显示。，
3、css背景图居中
横向居中：
background: no-repeat center top
纵向居中：
background: no-repeat left 50%
这里50%是随意设置考上为50%距离，细节具体上下垂直居中需要再通过百分比均衡设置。
4、背景图片一般案例
body设置网页背景css代码
body{background:url(/uploads/image/wimg201301/divcss5-logo-2013.gif) no-repeat 0 0}
css图片背景案例截图
不重复也不平铺图片背景截图
5、div css背景图片居中
css背景图片居中代码：
body{background:url(/uploads/image/wimg201301/divcss5-logo-2013.gif) no-repeat center 0}
这里我们用了“center ”居中属性，更多详情可进入css 背景了解基础
居中截图
背景图片居中于网页截图
6、背景图片横向平铺
css背景x横向平铺代码：
body{background:url(/uploads/image/wimg201301/divcss5-logo-2013.gif) repeat-x}
案例截图：
y轴横向平铺图片背景截图
7、背景图片纵向平铺
css背景y纵向平铺代码：
body{
background:url(/uploads/image/wimg201301/divcss5-logo-2013.gif) repeat-y
}
平铺重复图片背景效果截图：
纵向y轴方向垂直平铺图片背景截图
8、全网页背景图片重复平铺
图片背景全屏网页重复平铺关键代码：
body{background:url(/uploads/image/wimg201301/divcss5-logo-2013.gif)}
截图：
图片作为背景全屏平铺显示截图
说明：这里没有设置是否重复，是否居左居右，只设置背景引入图片即可简便地实现图片自然全屏平铺
二、css背景颜色 - top
1、background背景颜色语法
background:#fff
.divcss5{background:#fff}
设置了divcss5对象背景为白色
2、背景颜色案例
假如我们设置网页背景全部为白色，文字颜色为白色
1)、对应背景颜色css代码与html源代码：
html>
无标题文档body{background:#000; color:#fff}
divcss5 背景为黑色；文字颜色为白色
2)、背景颜色与文字颜色案例截图
css设置背景颜色与css字体颜色
如果想了解css背景颜色与css图片背景同时设置background基础进入：http://www.divcss5.com/rumen/r125.shtml
三、背景为颜色与为图片总结 - top
我们使用css background设置图片为网页背景，图片为网页背景各种样式，包括了是否背景图片居中，是否背景图片重复平铺显示、是否固定背景图片位置等背景样式，以上知识点与案例点希望大家自己复制以上代码实践观察即可掌握。
总结
以上是凯发k8官方网为你收集整理的html背景图片横屏,css背景颜色 背景图片 居中 重复 固定样式background经验篇的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇：
- 下一篇：