大家可以通过table来设置居中:
display: table;
width: auto;margin-left: auto;
margin-right: auto;
1、设置背景图尺寸background-size的方式:
设置背景图片的尺寸:background-size: length|percentage|cover|contain;
length|percentage:两个值,第一个值为宽、第二个值为高,如只设定一个值,第二个值为auto。
cover:拉伸背景图片短边尺寸,实现短边全覆盖,长边尺寸等比例拉伸,可能会超出背景定位区域边界。
contain:拉伸背景图片长边尺寸,实现长边全覆盖,短边等比例拉伸,可能无法完全覆盖背景定位区域边界。
使用场景:如果为了背景图全覆盖,则使用cover;如果为了最大化完整显示背景图,则使用contain。
/*
设置背景图片的尺寸:background-size: length|percentage|cover|contain;
length|percentage:两个值,第一个值为宽、第二个值为高,如只设定一个值,第二个值为auto。
cover:拉伸背景图片短边尺寸实现短边全覆盖,长边尺寸等比例拉伸,可能会超出背景定位区域边界。
contain:拉伸长边尺寸实现长边全覆盖,短边等比例拉伸,可能无法完全覆盖背景定位区域边界
*/
background-size:cover;
background-attachment:fixed;/* 当页面的其余部分滚动时,背景图像不会移动。 */
background-color:#2D3032 ;
background-image:url(image/background.jpg);
background-repeat:no-repeat;
background-position:center center;
/* background:#2D3032 url(image/background.jpg) no-repeat center center fixed; */
2、如果背景图所在元素未设置宽高尺寸,背景图无法显示,可通过css定位设置偏移量实现
/* 当页面的其余部分滚动时,当前元素不会移动。 */
position:fixed;
/* 让这个层充满整个屏幕 */
left:0;
right:0;
top:0;
bottom:0;
3、通过设置display;table、display;table-cell布局,实现居中效果,辅加vertical-align:middle;text-align:center;属性值设置
/* table布局,实现居中效果 */
.wrap{
display:table;
margin:0 auto;
height:94%;
}
.content{
text-align:center;
padding:0 30px;
/* 设置content里面内容垂直居中 */
display:table-cell;
vertical-align:middle;
}
4、响应式布局中,文本尺寸随页面布局变化,使用em尺寸设置行高等,实现行高与文本等比例变化
h1{
margin:0 0 0.2em 0;/* 使用em作为尺寸单位,实现与文本等比例变化 */
font-size:60px;
font-weight:700;
font-family:'Open Sans',Lato,sans-serif;
color:#fff;
line-height:1.1em;/* 使用em作为尺寸单位,实现与文本等比例变化 */
}
5、页面完整代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
body,div,h1,h2{
margin:0;
padding:0;
border:none;
}
/* 背景图平铺 */
.outer{
/*
设置背景图片的尺寸:background-size: length|percentage|cover|contain;
length|percentage:两个值,第一个值为宽、第二个值为高,如只设定一个值,第二个值为auto。
cover:拉伸背景图片短边尺寸实现短边全覆盖,长边尺寸等比例拉伸,可能会超出背景定位区域边界。
contain:拉伸长边尺寸实现长边全覆盖,短边等比例拉伸,可能无法完全覆盖背景定位区域边界
*/
background-size:cover;
background-attachment:fixed;/* 当页面的其余部分滚动时,背景图像不会移动。 */
background-color:#2D3032 ;
background-image:url(image/background.jpg);
background-repeat:no-repeat;
background-position:center center;
/* background:#2D3032 url(image/background.jpg) no-repeat center center fixed; */
/* 当页面的其余部分滚动时,当前元素不会移动。 */
position:fixed;
/* 让这个层充满整个屏幕 */
left:0;
right:0;
top:0;
bottom:0;
}
/* table布局,实现居中效果 */
.wrap{
display:table;
margin:0 auto;
height:94%;
}
.content{
text-align:center;
padding:0 30px;
/* 设置content里面内容垂直居中 */
display:table-cell;
vertical-align:middle;
}
h1{
margin:0 0 0.2em 0;/* 使用em作为尺寸单位,实现与文本等比例变化 */
font-size:60px;
font-weight:700;
font-family:'Open Sans',Lato,sans-serif;
color:#fff;
line-height:1.1em;
}
h2,a{
font-family:'Open Sans',Lato,sans-serif;
font-weight:300;
font-size:23px;
color:#fff;
line-height:2.2em;
}
/* 响应式布局代码 */
/* 设置max-width的值,从上到下的顺序,值从大到小才有效 */
@media screen and (max-width:1100px){
h2{
font-size:18px;
}
h1{
font-size:50px;
}
}
@media screen and (max-width:920px){
h2{
font-size:16px;
}
h1{
font-size:40px;
}
}
@media screen and (max-width:730px){
.content{
max-width:400px;
}
}
</style>
</head>
<body>
<div class="outer">
<div class="wrap">
<div class="content">
<h1>This Monkey Should Not Be Here</h1>
<h2>There's a problem with your custom domain - go back to the <a href="#">domain instructions</a> & try again</h2>
</div>
</div>
</div>
</body>
</html>
所需背景图片: