设置背景图片,不拉伸图片,不重复
backgroundImage: 'url(' + require('@/assets/image/login-bg.jpg') + ')',
backgroundRepeat: 'no-repeat'
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-position: center 0;
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(http://www.divcss5.com/img201301/divcss5-logo-2013.gif) no-repeat 0 0 }
这里设置了图片“http://www.divcss5.com/img201301/divcss5-logo-2013.gif”作为网页背景不重复并靠上靠左显示。,
3、CSS背景图居中
横向居中:
background:url(图片地址) no-repeat center top
纵向居中:
background:url(图片地址) no-repeat left 50%
这里50%是随意设置考上为50%距离,细节具体上下垂直居中需要再通过百分比均衡设置。
4、div css背景图片居中
Css背景图片居中代码:
body{background:url(http://www.divcss5.com/img201301/divcss5-logo-2013.gif) no-repeat center 0}
5、背景图片横向平铺
CSS背景X横向平铺代码:
body{background:url(http://www.divcss5.com/img201301/divcss5-logo-2013.gif) repeat-x}
6、背景图片纵向平铺
CSS背景Y纵向平铺代码:
body{
background:url(http://www.divcss5.com/img201301/divcss5-logo-2013.gif) repeat-y
}
8、全网页背景图片重复平铺
图片背景全屏网页重复平铺关键代码:
body{background:url(http://www.divcss5.com/img201301/divcss5-logo-2013.gif)}
说明:这里没有设置是否重复,是否居左居右,只设置背景引入图片即可简便地实现图片自然全屏平铺
二、CSS背景颜色 - TOP
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背景颜色与CSS图片背景同时设置background基础进入:http://www.divcss5.com/rumen/r125.shtml