200字范文,内容丰富有趣,生活中的好帮手!
200字范文 > html 图片 填充方式 聊聊CSS背景图片的几种填充类型

html 图片 填充方式 聊聊CSS背景图片的几种填充类型

时间:2020-03-02 23:53:22

相关推荐

html 图片 填充方式 聊聊CSS背景图片的几种填充类型

因为今天刚刚开了blog,作为一个前端designer,就想自己设计自己的Blog样式,看着也舒心。

在设计的过程中第一步就是先排版构建框架,后利用CSS对各个块进行定位。不过各个样式的id和class博客园本身已经定义好了,我们可以在设置面板中勾选禁用模板默认CSS”复选框。然后刷新博客首页查看源码,将代码copy到dw上修改样式。最后将自己修改满意好的css样式贴到“管理”-“博客设置”中“通过CSS定制页面”的文本框中。

言归正传,在设计的过程中需要填充背景图片,因为不同浏览器或窗口大小,图片可能只显示一部分或者重复填充多次,但是我们只需要一副完整的图片呈现。

这是一个div的id样式:#blogTitle{

background-image:url(image/blog2.jpg);

height:400px;

padding-left:5%;

padding-top:20px;

}

如果div的尺寸与背景图片的尺寸不一样或者DIV不是固定大小,那么图片肯定是无法完全显示。

所以加上一句#blogTitle{

background-image:url(image/blog2.jpg);

height:400px;

padding-left:5%;

padding-top:20px;

background-size:cover;

}

现在图片可以自动填充浏览器显示页面的大小。不过经过测试,至少在IE8上仍旧无法正常显示,然后继续测试发现这个属性在firefox,chrome,360,以及ie9上都可以使用。

下面是我继续查找资料测试得到的

1.若想要背景图片以一定大小呈现#background-size{

background-size:200px100px;//背景图将以200px*100px像素大小呈现,会多次填充

}

2.若想要背景图片以一百分比呈现#background-size2{

background-size:30%60%;//背景图将以原图大小的30%*60%像素大小呈现,会多次填充

}

3.想要完全呈现且只呈现一次#background-size3{

background-size:cover;//背景图完全填充页面只显示一次

}

4.想要缩小比例反复填充#background-size4{

background-size:contain;//按照原图等比例缩小反复填充满div

}

5.按照原图大小反复填充#background-size5{

background-size:auto;//按照原图大小反复填充满div

}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。