背景LOGO图片可以不用贴着边框来放置了

 2016-09-24 16:11

当我们做网页时,常常会为了总体效果在背景上放置一个背景图片(或LOGO)。因为是PNG透明的,为了好看,我们希望它不要太贴在一边,总体能达到下面这个效果就OK了:

初步的构思是用background来实现,因为里面有上下左右(top\bottom\left\right)4个对齐方式。但问题是这个上下左右没有数值可设置,如果我们想做成类似内边距的效果就无法实现。

对于固定DIV来说,使用CSS 2.1来做到这一点是可能的,但是很麻烦:用百分比的形式来反算位置。因为我们重点不是这个,所以不详细说明了。(我也没看明白 - -!)

background-postition的扩展语法方案

在CSS背景与边框(第三版)中,background-postion属性已经得到扩展,我们可以在偏移量后加数值来规定偏移了。实现上面这个效果的关键代码如下:

background:#BFEFFF url('...') no-repeat;
background-position:right 30px bottom 20px;

当然,因为某些浏览器还不能完全支持,所以我们不得不给它加一个回退机制:在background里面增加right和bottom的定位。

background:#BFEFFF url('...') no-repeat right bottom;
background-position:right 30px bottom 20px;

background-origin方案

其实上面我们有一个疑问,background-position对应的位置到底是对应的哪儿的?!边框的外沿边框border-box?还是边框的内边距padding-box?又或者是内容的外沿框content-box?

    border-box
padding-box
content-box

默认情况下,background-position是以padding-box为准的,那么我们可不可以把这背景LOGO图片对齐到content-box层上呢,这样我们也可以实现上面那个效果。答案是肯定的,因为我们有一个background-origin。思考下,我们可将上面的代码转变成这样:

padding:30px 20px;
background:#BFEFFF url('...') no-repeat right bottom;/* 或是 100% 100% */
background-origin:content-box;

calc()函数方案

之前我们提到,把背景图片定位可以以左上角偏移的思路来考虑,其实,我们这里也就是希望它有一个100%-30px的水平偏移,以及100%-20px的垂直偏移。那么,我们可以请出calc()这个函数,它可以完美在background-position属性中使用:

background:#BFEFFF url('...') no-repeat;
background-position:calc(100% - 30px) calc(100% - 20px);
作者头像

作者:紫铜炉

自由博主,网页设计师。我关注科技产品和个人博客发展,注重用户体验和界面优化。

 发表评论: