zoukankan      html  css  js  c++  java
  • 浅谈背景图片的填充

    在设计的过程中第一步就是先排版构建框架,后利用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:200px 100px;   

          }                              //背景图将以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

  • 相关阅读:
    需求调研-用户访谈
    kettle监控销售人员当月每天任务完成率_20161107周一
    MySQL学习_计算用户支付方式占比_20161104
    MySQL 数据底部出现总计字样 第二种办法 纵向合并 20161103
    MySQL 单笔订单满6个及以上产品且金额>=300赠送优惠券_20161103
    MySQL学习_查看各仓库产品的销售情况_20161102
    MySQL与EXCEL sum sumif sumifs 函数结合_品牌汇总_20161101
    MySQL_活动期间单笔订单最高的且满600元 判别是重激活客户还是10月注册客户_20161031
    MySQL活动期间订单满600元并且在活动日期之前超过30天没有下过单_20161030
    MySQL活动期间制定月份注册用户下单情况_20161029
  • 原文地址:https://www.cnblogs.com/ShirleyLiu/p/5334704.html
Copyright © 2011-2022 走看看