因为今天刚刚开了blog，作为一个前端designer，就想自己设计自己的Blog样式，看着也舒心。
在设计的过程中第一步就是先排版构建框架，后利用CSS对各个块进行定位。不过各个样式的id和class博客园本身已经定义好了，我们可以在设置面板中勾选禁用模板默认CSS”复选框。然后刷新博客首页查看源码，将代码copy到dw上修改样式。最后将自己修改满意好的css样式贴到“管理”-“博客设置”中“通过CSS定制页面”的文本框中。
言归正传，在设计的过程中需要填充背景图片，因为不同浏览器或窗口大小，图片可能只显示一部分或者重复填充多次，但是我们只需要一副完整的图片呈现。
这是一个div的id样式：
|
1
2
3
4
5
6
|
#blogTitle{
background-image
:
url
(image/blog
2
.jpg) ;
height
:
400px
;
padding-left
:
5%
;
padding-top
:
20px
;
}
|
如果div的尺寸与背景图片的尺寸不一样或者DIV不是固定大小，那么图片肯定是无法完全显示。
所以加上一句
|
1
2
3
4
5
6
7
8
|
#blogTitle{
background-image
:
url
(image/blog
2
.jpg) ;
height
:
400px
;
padding-left
:
5%
;
padding-top
:
20px
;
background-
size
:cover;
}
|
现在图片可以自动填充浏览器显示页面的大小。不过经过测试，至少在IE8上仍旧无法正常显示，然后继续测试发现这个属性在firefox，chrome，360，以及ie9上都可以使用。
下面是我继续查找资料测试得到的
1.若想要背景图片以一定大小呈现
|
1
2
3
4
|
#bac
kground-size{
background-
size
:
200px
100px
; //背景图将以
200px
*
100px
像素大小呈现，会多次填充
}
|
2.若想要背景图片以一百分比呈现
|
1
2
3
4
|
#bac
kground-size
2
{
background-
size
:
30%
60%
; //背景图将以原图大小的
30%
*
60%
像素大小呈现，会多次填充
}
|
3.想要完全呈现且只呈现一次
|
1
2
3
|
#bac
kground-size
3
{
background-
size
:cover; //背景图完全填充页面 只显示一次
}
|
4.想要缩小比例反复填充
|
1
2
3
|
#bac
kground-size
4
{
background-
size
:contain; //按照原图等比例缩小反复填充满div
}
|
5.按照原图大小反复填充
|
1
2
3
|
#bac
kground-size
5
{
background-
size
:
auto
; //按照原图大小反复填充满div
}
|
本文转自ChokCoco博客园博客，原文链接：http://www.cnblogs.com/coco1s/p/3577142.html
