CSS学习(九)-CSS背景
一、理论:
1.background-break
a.bounding-box 背景图像在整个内联元素中进行平铺
b.each-box 背景图像在行内中进行平铺
c.continuous 下一行的背景图像紧接着上一行中的图像继续平铺
以上仅在firefox下可用
2.css多背景
a.background-image 设置元素背景图片民,可用相对地址或绝对地址索引背景图像
b.background-repeat 设置元素背景图像的平铺方式 默认repeat
c.background-size 设置元素背景图像的尺寸大小 默认auto
d.background-attachment 设置元素的背景图片是否固定 默认scroll
e.background-clip 控制元素背景图像显示区域大小,默认border-box
f.background-color 设置元素背景颜色
g.多个属性中间必须用","分开
h.最先声明的背景图片将会居于最上层,最后指定的图片放于最底层
二、实践:
1.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
body{
background: #000 url(images/2-11-test.jpg) center center fixed no-repeat;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
@media only all and (max-width:1024px) and (max-height: 768px){
body{
-moz-background-size: 1024px 768px;
-webkit-background-size: 1024px 768px;
-o-background-size: 1024px 768px;
background-size: 1024px 768px;
}
}
@media only all and (max-width:640px) and (max-height: 480px){
body{
-moz-background-size: 640px 480px;
-webkit-background-size: 640px 480px;
-o-background-size: 640px 480px;
background-size: 640px 480px;
}
}
</style>
</head>
<body>
<div></div>
<div class="div1" ></div>
<div class="div2" ></div>
<div class="div3" ></div>
<div class="div4" ></div>
</body>
</html>
2.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.demo{
width: 500px;
height: 300px;
border:20px solid rgba(104,105,168,0.5);
border-radius: 10px;
padding: 80px 60px;
color:#123589;
font-size: 25px;
line-height: 1.5;
text-align: center;
}
.multipleBg{
background: url("images/round-box1.jpg") no-repeat left top,
url("images/round-box-2.jpg") no-repeat right top,
url("images/border-radius.jpg") no-repeat left bottom,
url("images/tabs-image.jpg") no-repeat right bottom,
url("images/border.jpg") no-repeat right bottom;
-webkit-background-origin: border-box,border-box,border-box,border-box,padding-box;
-moz-background-origin: border-box,border-box,border-box,border-box,padding-box;
-o-background-origin: border-box,border-box,border-box,border-box,padding-box;
background-origin: border-box,border-box,border-box,border-box,padding-box;
-moz-background-clip: border-box;
-webkit-background-clip: border-box;
-o-background-clip:border-box;
background-clip: border-box;
}
</style>
</head>
<body>
<div class="demo multipleBg">用五张背景图片做出这种效果</div>
</body>
</html>
CSS学习(九)-CSS背景的更多相关文章
- Html和Css学习笔记-css进阶-盒模型
我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 此篇博客是我的复习笔记,html和css学的时间太久了,忘得差不多了,最近要使用一下,所以重新打开html的书略读,后记录了标签 ...
- 【CSS学习笔记】背景图片
直接看代码: background: blue; /*页面背景为蓝色,很简单的代码*/background-image:url(small.jpg); /*页面背景是名字叫small.jpg的图片*/ ...
- CSS学习笔记——CSS选择器样式总结
<style type="text/css"> * { padding:0; margin:0; } .box h2 { //内边距左边的距离 padding-left ...
- Html和Css学习笔记-css基础知识
我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 此篇博客是我的复习笔记,html和css学的时间太久了,忘得差不多了,最近要使用一下,所以重新打开html的书略读,后记录了标签 ...
- CSS学习笔记——CSS中定位的浮动float
昨天在解决了盒模型的问题之后又出现了新的知识模糊点:浮动和绝对定位?今天先解决浮动相关的问题,首先列举出想要解决的问题: 1.浮动到底是怎么样的? 2.浮动对元素的影响有什么? 3.浮动主要用来干什么 ...
- CSS 学习笔记——CSS Selector
CSS1 中定义的选择器 类型选择器 用于选择指定类型的元素(其实他就是 html 标签选择器),常见用法如下: body { /*对 body 元素定义样式*/ } body,div { /*同时选 ...
- css学习_div+css布局
1.布局(盒子布局.盒子模型.标准流.脱离文档流) 标准文档流:块级独占一行 ,行内块和行内元素都是和其他共占一行,在盒子中的元素遵循标准流从左到右从上到下排列,超过父元素时会溢出. 一行行看 浮动 ...
- 【CSS学习】--- 背景
一.前言 元素的背景区域包括:元素的内容.内边距和边框区域. CSS中用于设置背景的属性有: background-color 设置背景颜色 background-image 设置背景图片 backg ...
- HTML学习笔记 CSS背景样式案例 第六节 (原创) 参考使用表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 值得学习的CSS知识
这里零度给大家推荐几个值得学习的CSS技巧,能让你编写网页事半功倍!一.清除默认值 通常 padding 的默认值为 0,background-color 的默认值是 transparent.但是在不 ...
随机推荐
- CentOS 6.5,SSH安装与配置
#rpm -qa |grep ssh 检查是否装了SSH包 #yum install openssh-server 没有的话,安装SSH服务 #chkconfig --list sshd 检查SSHD ...
- python selenium firefox 添加cookie add_cookie
from selenium import webdriver driver = webdriver.Firefox() driver.get('http://www.baidu.com') cooki ...
- HDU 5514.Frogs-欧拉函数 or 容斥原理
Frogs Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Total Submi ...
- PageRank 算法简介
有两篇文章一篇讲解(下面copy)< PageRank算法简介及Map-Reduce实现>来源:http://www.cnblogs.com/fengfenggirl/p/pagerank ...
- RabbitMQ (十四) 普通集群
上篇文章把单机集群搭建好了,可以开始验证普通集群的相关功能了. 我们首先在管理后台(15672,15673 都可以)添加一个用户,并用新用户登录,添加一个虚拟主机 由于是在一台机器上模拟集群,所以我们 ...
- JCL: What is EXCP
JCL: What is EXCP ? EXCP stands for EXecute Channel Program. These are the I/O subsystem hardwar ...
- matlab学习之求解函数的根和极小值
只是用来求解函数的部分一个根,具体算法没查询,只是调用自带的函数 代码如下 % 求函数零点和极小值 xiszero=func(0) x=-1:0.1:1.5; y=func(x); plot(x,y) ...
- bzoj 2038 小Z的袜子(hose)(莫队算法)
2038: [2009国家集训队]小Z的袜子(hose) Time Limit: 20 Sec Memory Limit: 259 MBSubmit: 11542 Solved: 5166[Sub ...
- [LOJ6179]Pyh的求和
首先有一个等式是$\varphi(ab)=\frac{\varphi(a)\varphi(b)d}{\varphi(d)}$,其中$d=(a,b)$,这个比较好证,直接按展开式计算可得$\varphi ...
- [TC14860]SquadConstructor2
[TC14860]SquadConstructor2 题目大意: 有\(n(n<2^m,m\le8)\)个互不相等的数\(v_i\).从中选取\(k(k\le8)\)个数\(b_i\),求\(\ ...