文档章节

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

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

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。


本文转载自:http://blog.csdn.net/yuu2lee4/article/details/45314933

共有 人打赏支持
y
粉丝 1
博文 20
码字总数 0
作品 0
程序员
私信 提问
DIV+CSS专题: CSS表单设计

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

向日葵饼干
2014/06/10
165
0
天呐!我给body设置的背景色被浏览器吃掉了!

一、前言 人在前端已经漂泊数年,机缘巧合才发现,这几年给body写的背景色,全被浏览器给「吃」了。文中涉及的是CSS中关于特殊元素(html/body)的背景渲染的原理,对你而言它也许是块新大陆...

Wilton
05/30
0
0
Java程序员从笨鸟到菜鸟之(十六)CSS基础积累总结(上)

一:CSS的工作原理 1.基本的CSS语法 比方说,我们要用红色作为网页的背景色: 用HTML的话,我们可以这样: 用CSS的话,我们可以这样获得同样的效果: body {background-color: #FF0000;} 上例...

长平狐
2012/11/12
63
0
html中background-image属性的设置

对于图片,首先我们先想到是背景图片。因为我们许许多的装饰都是用背景图片来实现的。既然这样,那么就从CSS控制背景图片讲起吧。 原文在这里

慕广陵
2012/11/29
0
0
CSS Sprites(精灵/雪碧)技术原理和使用

摘自:http://blog.lehu.shu.edu.cn/hikui/A359743.html 雪碧图,其实就是背景采用一张大图,通过背景的定位来修改使用的背景,这样做可以提高网站的速度(加载一张图对比加载一批图)。 下面...

红羊在北京
2016/07/27
29
0

没有更多内容

加载失败,请刷新页面

加载更多

KaliLinux常用服务配置教程DHCP服务工作流程

KaliLinux常用服务配置教程DHCP服务工作流程 DHCP服务工作流程如图1.1所示。 具体的工作流程如下所示: (1)DHCP客户端以广播的方式发出DHCP Discover报文。 (2)所有的DHCP服务器(DHCP ...

大学霸
9分钟前
0
0
Spring Junit单元测试配置

<dependency> <groupId>org.springframework</groupId> <artifactId>spring-test</artifactId> <version>5.1.2.RELEASE</version></dependency><dependency> <group......

TonyTaotao
14分钟前
0
0
线程安全与非线程安全-个人理解

类的某个方法是线程安全的, 说明这个方法在并发执行中,从开始执行到执行完毕,都是同步的, 比如:之前做的并发数据导出,并发的查询数据库, 但是在写入excel的时候,需要做一个同步,因为...

Java搬砖工程师
16分钟前
1
0
如何提升JavaScript的任务效率?学会后教给你同事

本文由云+社区发表 一、概述 JavaScript 语言采用的是单线程模型,也就是说,所有任务只能在一个线程上完成,一次只能做一件事。前面的任务没做完,后面的任务只能等着。随着电脑计算能力的增...

腾讯云加社区
16分钟前
0
0
Hadoop运行在Kubernetes平台实践

Hadoop与Kubernetes就好像江湖里的两大绝世高手,一个是成名已久的长者,至今仍然名声远扬,一个则是初出茅庐的青涩少年,骨骼惊奇,不走寻常路,一出手便惊诧了整个武林。Hadoop与Kubernete...

微笑向暖wx
17分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部