【Multiple backgrounds】用CSS3实现网页多重背景
对于背景属性background-image大家应该已经很熟悉了,在CSS2中与它相关的属性还有background-repeat(设置背景是否重复及重复的方式)、background-position(设置背景图片在容器中的位置)、background-attachment(设置背景是否随页面一起滚动),通过这些属性来控制背景图片在容器中如何显示,但我们也只能为容器提供一张背景图片,如果我们想让一个容器的背景用多张图片实现,那么我们该如何去做呢?再在容器里添加一些无用的元素吗?
CSS3的诞生为我们解决了这一问题,在CSS3里,通过background-image或者background可以为一个容器设置多张背景图像,也就是说可以把不同背景图象只放到一个块元素里。
首先我们来看一下语法吧:
background : [background-image] | [background-origin] | [background-clip] | [background-repeat] | [background-size] | [background-attachment] | [background-position]
多个背景图片的url之间使用逗号隔开即可,如果有多个背景图片,而其他属性只有一个(例如background-repeat只有一个),那么所有背景图片都应用该属性值。
下面我们就看一个例子吧:
这里我们要使用5张图片作为一个div容器的背景,我们来看一下代码:
HTML代码:
<div class="div1">
<a href="http://beyondweb.cn/" title="BeyondWeb-记录与分享前端开发的点点滴滴">BeyondWeb前端开发</a>
</div>
CSS代码:
.div1{
margin:50px auto;
width:700px;
height:450px;
border:10px dashed #ff00ff; background-image:url(images/1.jpg),url(images/2.jpg),url(images/3.jpg),url(images/4.jpg),url(images/5.jpg);
background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,no-repeat;
background-position:top left,top right,bottom left,bottom right,center center;
}
效果如下图:
在上面的代码中有这一句:
background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,no-repeat;
其实是可以简化的,因为在前面已经提到“如果有多个背景图片,而其他属性只有一个(例如background-repeat只有一个),那么所有背景图片都应用该属性值。”因此可以简化为:
background-repeat:no-repeat;
写一个值就行了,效果是完全一样的。
当然上面设置背景图片的各个属性时是分开写的,那么我们也可以把背景图片的各个属性写在一块,这时的CSS代码如下:
.div1{
...
background:url(images/1.jpg) no-repeat top left,
url(images/2.jpg) no-repeat top right,
url(images/3.jpg) no-repeat bottom left,
url(images/4.jpg) no-repeat bottom right,
url(images/5.jpg) no-repeat center center;
...
}
哦了,CSS3多种背景就是这么回事儿,很简单吧。
【Multiple backgrounds】用CSS3实现网页多重背景的更多相关文章
- multiple backgrounds 多重背景
语法缩写如下: background : [background-color] | [background-image] | [background-position][/background-siz ...
- CSS3背景图片(多重背景、起始位置、裁剪、尺寸)
一.多重背景图片 ①CSS3允许我们在一个元素上添加多个图片 ②多重背景可以把多个图片资源添加到background属性上,用逗号隔开,然后用background-position把他们定位到你想要的 ...
- multiple backgrounds
multiple backgrounds 多重背景,也就是CSS2里background的属性外加origin.clip和size组成的新background的多次叠加,缩写时为用逗号隔开的每组值:用 ...
- 【学】CSS3基础实例1 - 用CSS3做网页中的小三角,以及transition的用法
自开了博客园已经有2周了吧,虽然转载了一些觉得比较有用的文章之外还没有开始写自己的一些学习记录,那就从今天开始. 目前看了妙味的不少视频,有css+html,js的基础和中级也都看完了,作业也都做了, ...
- css3学习总结4--CSS3背景
css3背景 1. background-size 2. background-origin 3. background-clip 示例: className { background:url(bg_ ...
- 学习笔记 第十二章 CSS3+HTML5网页排版
第12章 CSS3+HTML5网页排版 [学习重点] 正确使用HTML5结构标签 正确使用HTML5语义元素 能够设计符合标准的网页结构 12.1 使用结构标签 在制作网页时,不仅需要使用< ...
- css3新增属性-background背景
css3新增属性 边框属性 背景属性 文字属性 颜色属性 背景属性 属性 说明 background-image 添加背景图片 background-size 指定背景图像的大小 background ...
- CSS 第四天 多重背景 变形 过渡
背景原点:background-origin 图片起始位置 border-box包括边框 padding-box边框内 content-box 内容内 **background-repeat 为no- ...
- 《CSS3专业网页开发指南》笔记
书本:<CSS3专业网页开发指南>(the book of css3) Peter Gasston 著 李景媛 吴晓嘉 译 第1章: 1.box-sizing : IE8及以上版本 ...
随机推荐
- [leetcode tree]102. Binary Tree Level Order Traversal
Given a binary tree, return the level order traversal of its nodes' values. (ie, from left to right, ...
- C# 复制、粘贴文本信息到系统剪贴板
复制: Clipboard.SetDataObject(textBox1.SelectedText); 粘贴: IDataObject iData = Clipboard.GetDataObject( ...
- hdu 2476 区间dp
题意: 给出两个串s1和s2,一次只能将一个区间刷一次,问最少几次能让s1=s2 例如zzzzzfzzzzz,长度为11,我们就将下标看做0~10 先将0~10刷一次,变成aaaaaaaaaaa 1~ ...
- BZOJ 4197 NOI 2015 寿司晚宴 状压DP
4197: [Noi2015]寿司晚宴 Time Limit: 10 Sec Memory Limit: 512 MBSubmit: 694 Solved: 440[Submit][Status] ...
- python开发_tkinter_图形随鼠标移动
做这个东西的时候,灵感源自于一个js效果: 两个眼睛随鼠标移动而移动 运行效果: =============================================== 代码部分: ===== ...
- Android之基于HTTP协议的通信详解
Android系统中本身是有下载机制的,比如浏览器使用的DownloadManager.可遗憾的是,DownloadManager只提供给浏览器使用,一般的应用程序没法调用它. 另外,如果下载调用频繁 ...
- Codeforces Round #281 (Div. 2) D. Vasya and Chess 镜面对称 博弈论
D. Vasya and Chess time limit per test 2 seconds memory limit per test 256 megabytes input standard ...
- Python学习笔记(七)—字典的学习
总结内容: 1.字典的定义 2.字典的好处 3.字典的增删改查 4.字典常用方法及内置函数 5.字典的多层嵌套 6.字典的循环 7.字典小练习 1.字典的定义 字典是另一种可变容器模型,且可存储任意类 ...
- 原型设计工具 Axure
ahjesus Axure RP 7.0注册码 ahjesus Axure RP 7.0注册码 用户名:axureuser 序列号:8wFfIX7a8hHq6yAy6T8zCz5R0NBKeVxo9I ...
- Git_操作标签
如果标签打错了,也可以删除: $ git tag -d v0.1 Deleted tag 'v0.1' (was e078af9) 因为创建的标签都只存储在本地,不会自动推送到远程.所以,打错的标签可 ...