文档章节

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

y
 yuu2lee4
发布于 2016/06/20 14:58
字数 609
阅读 5
收藏 0
点赞 0
评论 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 ⋅ 0

天呐!我给body设置的背景色被浏览器吃掉了!

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

Wilton ⋅ 05/30 ⋅ 0

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

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

长平狐 ⋅ 2012/11/12 ⋅ 0

减少HTTP请求

本文为《高性能网站建设指南》学习笔记! 一.图片地图 一个导航地图为一张图片,通过点击的位置坐标来跳转到相应的页面。 实现:<img usemap="#map1" boder="0" src="xx.jpg"> <map> <area sh...

michaelxv ⋅ 2012/12/10 ⋅ 0

CSS Sprites(精灵/雪碧)技术原理和使用

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

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

web前端之css_day1

1、div和span div的语义是division“分割”; span的语义就是span“范围、跨度” div标签是一个容器级标签,里面什么都能放,甚至可以放div自己 span是一个“文本级”的标签, 表达“小区域、...

opsedu ⋅ 2016/05/09 ⋅ 0

html中background-image属性的设置

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

虎皮大王 ⋅ 2012/11/29 ⋅ 0

png 24 ie6下图片背景透明

PNG在IE6下透明的css解决方案(ie下链接失效) ie6并不是不支持png,它支持索引颜色的PNG-8,而是不支持RGB颜色的PNG-24。 ie6里的PNG-24图片做背景主要有以下几个问题: 一、ie6里png背景透...

0000001 ⋅ 2012/03/12 ⋅ 0

纯CSS控制背景图片100%自适应填充布局

在写主题样式的时候经常会碰到用背景图铺满整个背景的需求,这里分享下使用方法> HTML代码 > CSS样式 lf_bg{ position:fixed;top: 0;left: 0;width:100%;height:100%;min-width: 1000px;z-in...

陆辰熙 ⋅ 2017/12/12 ⋅ 0

温故而知新——CSS篇

什么是CSS CSS 层叠样式表 (Cascading Style Sheets) 用于定义HTML内容在浏览器内的显示样式 CSS发展 1996 w3c css1 1998 w3c css2 现在 w3c css3 为什么学习CSS CSS简化HTML相关标签,网页体...

jia林 ⋅ 2017/11/15 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Spring Bean基础

1、Bean之间引用 <!--如果Bean配置在同一个XML文件中,使用local引用--><ref bean="someBean"/><!--如果Bean配置在不同的XML文件中,使用ref引用--><ref local="someBean"/> 其实两种......

霍淇滨 ⋅ 23分钟前 ⋅ 0

05、基于Consul+Upsync+Nginx实现动态负载均衡

1、Consul环境搭建 下载consul_0.7.5_linux_amd64.zip到/usr/local/src目录 cd /usr/local/srcwget https://releases.hashicorp.com/consul/0.7.5/consul_0.7.5_linux_amd64.zip 解压consu......

北岩 ⋅ 26分钟前 ⋅ 0

Webpack 4 api 了解与使用

webpack 最近升级到了 v4.5+版 01 官方不再支持 node4 以下版本 官方不再支持 node4 以下版本官方不再支持 node4 以下的版本,所以如果你的node版本太低,先开始升级node吧!话说node10 ...

NDweb ⋅ 36分钟前 ⋅ 0

使用nodeJs安装Vue-cli

Vue脚手架就是一个Vue框架开发环境 脚手架的意思是帮你快速开始一个vue的项目,也就是给你一套vue的结构,包含基础的依赖库,只需要 npm install就可以安装,让我们不需要为了编辑或者一些其...

木筏笔歆 ⋅ 今天 ⋅ 0

【微信小程序开发实战】0x00.开发前准备工作

写在开始 本人资深后端码农一枚,近期项目需求,接触到了微信小程序,将学习过程整理成文分享给小伙伴们,由于是边学边整理难免有表述不对的地方,望大家及时指正,感谢。 本人微信号: dream...

dreamans ⋅ 今天 ⋅ 0

linux redis的安装和php7下安装redis扩展

安装redis服务器 (1)下载安装包: $ wget http://download.redis.io/releases/redis-2.8.17.tar.gz (2)编译程序: $ tar xzf redis-2.8.17.tar.gz $ cd redis-2.8.17 $ make $ cd src &&......

concat ⋅ 今天 ⋅ 0

Guava EventBus源码解析

一、EventBus使用场景示例 Guava EventBus是事件发布/订阅框架,采用观察者模式,通过解耦发布者和订阅者简化事件(消息)的传递。这有点像简化版的MQ,除去了Broker,由EventBus托管了订阅&...

SaintTinyBoy ⋅ 今天 ⋅ 0

http怎么做自动跳转https

Apache 版本 如果需要整站跳转,则在网站的配置文件的<Directory>标签内,键入以下内容: RewriteEngine on RewriteCond %{SERVER_PORT} !^443$ RewriteRule ^(.*)?$ https://%{SERVER_NAME......

Helios51 ⋅ 今天 ⋅ 0

Python爬虫,抓取淘宝商品评论内容

作为一个资深吃货,网购各种零食是很频繁的,但是能否在浩瀚的商品库中找到合适的东西,就只能参考评论了!今天给大家分享用python做个抓取淘宝商品评论的小爬虫! 思路 我们就拿“德州扒鸡”...

python玩家 ⋅ 今天 ⋅ 0

MySQL 内核深度优化

MYSQL数据库适用场景广泛,相较于Oracle、DB2性价比更高,Web网站、日志系统、数据仓库等场景都有MYSQL用武之地,但是也存在对于事务性支持不太好(MySQL 5.5版本开始默认引擎才是InnoDB事务...

java高级架构牛人 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部