文档章节

css畅想之多背景、background-area与background-id

y
 yuu2lee4
发布于 2016/06/20 14:58
字数 609
阅读 7
收藏 0

精选30+云产品,助力企业轻松上云!>>>

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。


y
粉丝 1
博文 20
码字总数 0
作品 0
程序员
私信 提问
加载中
请先登录后再评论。
图片与文本基础(html和css)

图片与文本基础 -----注释添加可以用/**/ 5.1图片 1.gif图片:最大颜色数256,保存时采用无损压缩 2.JPEG图片:可以包含1670万种颜色,保存时采用有损压缩,压缩率小的质量更高。为了避免图片...

osc_m5li5fvd
2019/05/12
6
0
jquery九大选择器的用法举例

1:基本选择器 改变 id 为 one 的元素的背景色为 #0000FF" $("#one").css("background","#0000FF"); 改变元素名为 <div> 的所有元素的背景色为 #00FFFF" $("div").css("background","#00FFF......

osc_sgs114rq
2019/01/02
1
0
DIV+CSS专题: CSS表单设计

css表单设计,包含以下内容和知识点: 改变文本框和文本域样式 用图片美化按钮 改变下拉列表样式 用label标签提升用户体验 一、改变文本框和文本域样式 如果前边几章学习的比较扎实的话,本节...

向日葵饼干
2014/06/10
165
0
css 尺寸、边框、内边距、背景以及css Sprite

上节课回顾: HTML标签: 格式排版  p 段落 双 br 换行 单 hr 分隔线 单 h1~h6 标题 双 pre 原样格式化输出 双 div 标签,无任何特殊意义 HTML标签 :文本 <em> 强调 倾斜 双 <ruby></ruby...

osc_6x8y8c2x
2018/07/28
2
0
省市区

(function($) { $.fn.selectpca = function(options) { var settings = $.extend({ province : 'provinceobj', city : 'cityobj', area : 'areaobj', provinceid : 'provinceid', cityid : '......

markYun
2013/08/09
51
0

没有更多内容

加载失败,请刷新页面

加载更多

在Python中从字符串转换为布尔值? - Converting from a string to boolean in Python?

问题: Does anyone know how to do convert from a string to a boolean in Python? 有谁知道如何在Python中从字符串转换为布尔值? I found this link . 我找到了此链接 。 But it doesn't......

javail
今天
19
0
中国饭店协会数据表明

记者了解到,中国饭店协会数据表明,2018年全国餐饮收入42716亿元,同比增长9.5%.根据国家统计局数据显示,截至2017年底,限额以上餐饮行业的从业人数达到2232万人,巨大的餐饮市场背后,餐饮行业的...

asd369
今天
35
0
OSChina 周六乱弹 —— 日本的丧尸光天化日之下都开始……

Osc乱弹歌单(2020)请戳(这里) 【今日歌曲】 @薛定谔的兄弟 :分享洛神有语创建的歌单「我喜欢的音乐」: 《風の手枕》- 増田俊郎 手机党少年们想听歌,请使劲儿戳(这里) @码界农民工 :...

小小编辑
今天
49
0
Hacker News 简讯 2020-07-11

更新时间: 2020-07-11 03:01 The TikTok app is no longer permitted on mobile devices that access Amazon email - (twitter.com) TikTok应用程序不再允许在访问亚马逊电子邮件的移动设备上......

FalconChen
今天
163
0
是否有可能从另一个git存储库中挑选一个提交? - Is it possible to cherry-pick a commit from another git repository?

问题: I'm working with a git repository that needs a commit from another git repository that knows nothing of the first. 我正在使用一个git存储库,需要从另一个不知道第一个存储库......

技术盛宴
昨天
41
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部