背景 background
css
|
说明
|
background-image:url("图片的网址");
|
背景图
|
background: url("
图片的网址
");
|
背景
|
background-color:#色码;
|
背景色彩
|
Exp:
background-image:url(背景图案.jpg,gif,bmp);
background-color:#FFFFFF;
background-color : transparent; <--设定背景为透明色
background-repeat 改变背景图片的重复并排的设定
css
|
说明 |
repeat
|
背景图片并排
|
repeat-x
|
背景图片以X方向
并排
|
repeat-y
|
背景图片以Y方向
并排
|
no-repeat
|
背景图片不
以并排的方式处理
|
Exp:
background-image:url("http://www.123.xxx.gif");
background-repeat:no-repeat;
以http://www.123.xxx.gif这张图片为背景,当图片大小不够的时候,不并排重复
background-attachment是否固定图片位置
css
|
说明 |
scroll
|
拉动卷轴时,背景图片会跟着移动(缺省值)
|
fixed
|
拉动卷轴时,背景图片不会跟着移动
|
Exp:
background-image:url("http://www.123.xxx.gif");
background-repeat:no-repeat;
background-attachment:fixed;
以http://www.123.xxx.gif
背景图片不重复并列,且不随卷轴移动
以长度定位background-position: x y
使用百分比定位 background-position: x% y%
backgroud-position: 0% 0%; 左边上方
backgroud-position: 0% 50%; 左边中间
backgroud-position: 50% 0%; 中间上方
backgroud-position: 50% 50%; 正中间
backgroud-position:100% 0%; 右边上方
backgroud-position: 0% 100%; 左边下方
backgroud-position: 100% 50%; 右边中间
backgroud-position: 50% 100%; 中间下方
backgroud-position: 100% 100%; 右边下方
以关键字定位
关键字
|
说明
|
top
|
上 ( y = 0 )
|
center
|
中 ( x = 50, y = 50 )
|
bottom
|
下 ( y = 100 )
|
left
|
左 ( x= 0 )
|
Exp:
background-position:center;
图片在指定背景中央X=50% Y=50%位置
background-position: 200px 30px
整張背景图片往右移200px 往下移30px
filter:alpha滤镜效果
filter:alpha(参数1=数值变化,参数2=数值变化)
Exp:
<img src="../xxx.gif" align=left style="filter:alpha(opacity=50,style=3)">
將../xxx.gif图片贴到页面左边,并将滤镜设定为透明度=50,且对角线渐增
●opacity:透明度,数值由0~100
<img src="../pichomepage03.gif" align=left style="filter:alpha(opacity=20)"> |
●style:Aplha的种类,0→不透明
<img src="../pichomepage03.gif" align=left style="filter:alpha(style=0)"> |
●style:Aplha的種類,1→直线渐增
<img src="../pichomepage03.gif" align=left style="filter:alpha(style=1)"> |
●style:Aplha的种类,2→圆形渐增
<img src="../pichomepage03.gif" align=left style="filter:alpha(style=2)"> |
●style:Aplha的种类,3→对角线渐增
<img src="../pichomepage03.gif" align=left style="filter:alpha(style=3)"> |
●fihishopacity:终止透明,数值由0~100,要与opacity与style配合
<img src="../pichomepage03.gif" align=left style="filter:alpha(opacity=0,finishopacity=100,style=2)"> |
●startx:渐增起始x坐标
fihishx:渐增結束x坐标
<img
src="../pichomepage03.gif" align=left
style="filter:alpha(opacity=0,finishopacity=100,style=1,startx=10,fihishx=100)"> |
●starty:渐增起始y坐标
fihishy:渐增結束y坐标
<img
src="../pichomepage03.gif" align=left
style="filter:alpha(opacity=0,finishopacity=100,style=1,starty=10,finishy=100)"> |
分享到:
相关推荐
CSS学习中EMMET语法、复合选择器、元素选择模式、以及背景的一些总结,观看视频中的个人总结,创作不易,如果有问题欢迎留言咨询,大家一起学习一起进步哇
介绍了CSS常用语法,例如:字体属性,文本属性,颜色和背景属性,边框属性,鼠标光标属性。。。 希望给大家有帮助!
快速掌握CSS属性之背景与表格 语法说明和事例。简明易懂易掌握。代码可直接复制。
CSS语法由三部分构成:选择器、属性和值: selector {property: value} CSS3 是最新的 CSS 标准。 css3比css多了一些样式设置而已。 css3是向前兼容的,也就是说,css中有效的code在css3也有效。 一个css与css3...
3.3.2 一些CSS 的实用技巧 3.3.3 怎样调试CSS 3.4 关于CSS 的学习 第4 章 网页头部元素的详细定义 第41 页 4.1 DOCTYPE 的选择 4.1.1 什么是DOCTYPE 4.1.2 选择什么样的DOCTYPE 4.2 名字空间 4.3 编码问题 4.4 meta ...
包含了HTML 5 中的一些新特性:嵌入音频...包含的一些css3新功能如圆角、多背景、@font-face 用户自定义字体、动画与渐变、渐变色、盒阴影、RGBa – 加入透明色、文字阴影等等及现在浏览器的兼容识别程度都弄得很清楚。
草案中的Grid布局被业界同仁普遍认为比“天书”还难… CSS3 还是草案,中文资料少之又少,基本上都是一篇内容转来转去,而我们的手册从基础语法到示例制作,都是根据W3C工作草案进行翻译,并结合自身的沉淀制作示例...
本程序可以方便CSS网页精灵的制作和维护 使用方法: 1、新建 -> 创建一个CSS精灵文档 2、打开 -> 打开由本程序打包的CSS网页精灵数据包,可以继续以前的工作 3、保存 -> 将当前文档打包保存 4、添加图片 -> 向...
CSS语法(不区分大小写) JavaScript语法(区分大小写) 颜色和背景标签和属性对照 CSS 语法(不区分大小写) JavaScript 语法(区分大小写) 样式标签和属性对照 CSS语法(不区分大小写) JavaScript 语法(区分大...
4.2.1 横向对齐方式 4.2.2 纵向对齐方式 4.3 图文混排 4.3.1 文字环绕 4.3.2 设置图片与文字间距 4.4 图文实例:八仙过海 第5章 用CSS设置网页中的背景 5.1 背景颜色 5.1.1 页面背景色 5.1.2 用...
3.css的背景属性 (1)背景颜色 选择器{ background-color: transparent透明(透明)/color; } (2)背景图片(便于控制位置) 常用于logo 装饰性的小图片或者超大图片 background-image: none(默认) |...
第5章 用CSS设置网页中的背景 5.1 背景颜色 5.2 背景图片 5.3 背景综合一:我的个人主页 5.4 背景综合二:古词《念奴娇·赤壁怀古》 第6章 用CSS设置表格与表单的样式 6.1 控制...
css笔记整理(精简) 初识CSS ...CSS语法 CSS样式引入 css选择器 CSS中的块级元素与行内元素 background 背景(集合样式) font 文字(集合样式) border 边框(复合样式,集合样式) CSS 框模型概述
《CSS 3.0 中文参考手册》-电子文档...圆角、多背景、@font-face 用户自定义字体、动画与渐变、渐变色、盒阴影、RGBa - 加入透明色、文字阴影等等 CSS3 的出现,让代码更简洁、页面结构更合理,性能和效果得到兼顾。
《精通HTML5 + CSS3+JavaScript网页设计》内容主要包括CSS3的基本语法和概念,设置文字、段落、图片、背景、表格、表单和菜单等网页元素的方法,以及CSS3滤镜的应用。重点介绍如何使用DlV+CSS3进行网页布局,注重...
第5章 用CSS设置网页中的背景 5.1 背景颜色 5.2 背景图片 5.3 背景综合一:我的个人主页 5.4 背景综合二:古词《念奴娇·赤壁怀古》 第6章 用CSS设置表格与表单的样式 6.1 ...
第5章 用CSS设置网页中的背景 5.1 背景颜色 5.2 背景图片 5.3 背景综合一:我的个人主页 5.4 背景综合二:古词《念奴娇·赤壁怀古》 第6章 用CSS设置表格与表单的样式 6.1 控制...
CSS3 还是草案,中文资料少之又少,基本上都是一篇内容转来转去,而我们的手册从基础语法到示例制作,都是根据W3C工作草案进行翻译,并结合自身的沉淀制作示例。 备受期待的 CSS 3 新功能: 圆角、多背景、@font-...
第5章 用CSS设置网页中的背景 5.1 背景颜色 5.1.1 页面背景色 5.1.2 用背景色给页面分块 5.2 背景图片 5.2.1 页面的背景图 5.2.2 背景图的重复 5.2.3 背景图片的位置 5.2.4 固定背景图片 ...