css畅想之多背景、background-area与background-id
博客专区 > yuu2lee4 的博客 > 博客详情
css畅想之多背景、background-area与background-id
yuu2lee4 发表于1年前
css畅想之多背景、background-area与background-id
  • 发表于 1年前
  • 阅读 0
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 新注册用户 域名抢购1元起>>>   

1、多background

例如:background:url(center.png) , url(left.png) no-repeat,url(right.png) right top;  在background:url通过逗号分隔实现在一个标签下应用多张背景的目的。


2、background-area(a,b,x,y,w,h)

指定背景的区域,a,b建立标签的坐标系,a的值可以取left、right,b的值可以取top、bottom,x、y代表相对于这个坐标系的坐标,w、h代表背景区域的长度和宽度,不写默认宽度为x点到标签的最右边、高度为y点到标签的最底部


3、background-id(a,b)

应用于多background下,为了更清楚的区分各组background,而产生的代号,a代表原id,b代表修改后的id,不写默认为1


4、应用

a、导航条、按钮


最简单的做法是直接截整张图当背景,缺点是不够灵活,如果遇到各种长短不一的导航条或者按钮,如这样


一张一张截图未免太蛋疼,传统的做法是滑动门(不知道的自行百度),不过也颇为麻烦,嵌套太多

那么用background-area(x,y,w,h)怎么写呢

切图如下:

          left.png   15X37px          center.png   10X37px           right.png  15X37px  

css: div{  height:37px; width:100px;  background:url(left.png) no-repeat id(1),url(center.png) area(left,top,15,0,70,37)  id(2), url(right.png) area(right,top,15,0,15,37)  id(3); }

也可以不写id,不写的话,id从1自动开始累加,另外由于图片不透明,上面的css也可以简化为

div{  height:37px; width:100px;  background:url(center.png) , url(left.png) no-repeat,url(right.png) right top; }

配合background-size:cover,可以用一条样式做不同长度和高度的导航条。当然,利用多背景和background-area的概念,可以用更简单的方法制作更复杂的背景。

b、background-id(a,b)的作用

当在background引入多背景这个概念之后,为每个背景指定相应的id是有必要的,比如:

div{  height:37px; width:100px;  background:url(left.png) no-repeat,url(center.png) area(left,top,15,0) , url(right.png) right top;  background-repeat:repeat; }

中background-repeat:repeat;到底会覆盖background:url(left.png) no-repeat,url(center.png) area(left,top,15,0) , url(right.png) right top;中的哪一条呢?

所以指定相应的规则显得非常必要,我们规定 background-repeat:repeat; 默认是修改id为1的background的样式,当然你可以显式的加上id如: background-repeat:repeat id(2);来修改id为2的background的样式,而background-id(a,b)可以将id为a的background的id修改为b。


共有 人打赏支持
粉丝 0
博文 20
码字总数 0
×
yuu2lee4
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: