CSS之生成全屏背景图片
2016-06-06 09:36
369 查看
在CSS中背景图片的填充方法：
主要是css样式：
backgroundimagestyles.css
而你肯定想不到“主”代码是非常简单的，哈哈。
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>CSS之生成全屏背景图片</title>
<link rel="stylesheet" href="http://files.cnblogs.com/files/caidupingblogs/backgroundimagestyles.css" />
</head>
<body>
</body>
background-position:x,y(背景图片x,y轴的定位) background-repeat:no-repeat(不平铺) background-repeat:repeat-x(水平方向平铺) background-repeat:repeat-y(垂直方向平铺)
主要是css样式：
*{
margin:0;
padding:0;
}
html{
/* This image will be displayed fullscreen */
background:url('http://images.cnblogs.com/cnblogs_com/caidupingblogs/828702/o_QQ%e6%88%aa%e5%9b%be20151028154841.png') no-repeat center center;
/* Ensure the html element always takes up the full height of the browser window */
min-height:100%;
/* The Magic */
background-size:cover;
}
body{
/* Workaround for some mobile browsers */
min-height:100%;
font:14px/1.3 'Segoe UI',Arial, sans-serif;
}
a, a:visited {
outline:none;
color:#1c4f64;
}
a:hover{
text-decoration:none;
}
section, footer, header{
display: block;
}
footer{
background-color: #111111;
bottom: 0;
box-shadow: 0 -1px 2px rgba(0,0,0,0.4);
height: 45px;
left: 0;
position: fixed;
width: 100%;
z-index: 100000;
}
footer h2{
color: #EEEEEE;
font-size: 14px;
font-weight: normal;
left: 50%;
margin-left: -400px;
padding: 13px 0 0;
position: absolute;
width: 540px;
}
footer h2 i{
font-style:normal;
color:#888;
}
footer a.tzine,a.tzine:visited{
color: #999999;
font-size: 12px;
left: 50%;
margin: 16px 0 0 110px;
position: absolute;
text-decoration: none;
top: 0;
}
footer a i{
color:#ccc;
font-style: normal;
}
footer a i b{
color:#c92020;
font-weight: normal;
}backgroundimagestyles.css
而你肯定想不到“主”代码是非常简单的，哈哈。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>CSS之生成全屏背景图片</title> <link rel="stylesheet" href="http://files.cnblogs.com/files/caidupingblogs/backgroundimagestyles.css" /> </head> <body> </body> </html>
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>CSS之生成全屏背景图片</title>
<link rel="stylesheet" href="http://files.cnblogs.com/files/caidupingblogs/backgroundimagestyles.css" />
</head>
<body>
</body>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 