星空网 > 软件开发 > 网页设计

浅谈背景图片的填充

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

 

   




原标题:浅谈背景图片的填充

关键词:图片

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

跨境电商宗旨:https://www.goluckyvip.com/tag/36701.html
跨境电商综合:https://www.goluckyvip.com/tag/36702.html
跨境电商综合服务:https://www.goluckyvip.com/tag/36703.html
跨境电商综合服务商:https://www.goluckyvip.com/tag/36705.html
跨境电商综合试验区:https://www.goluckyvip.com/tag/36706.html
跨境电商综合体:https://www.goluckyvip.com/tag/36707.html
探讨内地人开设香港账户的可行性 :https://www.kjdsnews.com/a/1836442.html
在古巴做游轮 古巴旅游项目:https://www.vstour.cn/a/363194.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流