css图片层叠样式,css图片层叠样式怎么用

CSS层叠样式淡化图象

在head区域加入代码:

创新互联公司专注于企业全网整合营销推广、网站重做改版、固原网站定制设计、自适应品牌网站建设、成都h5网站建设、电子商务商城网站建设、集团公司官网建设、外贸网站制作、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为固原等各大城市提供网站开发制作服务。

style type="text/css"

!--

.alpha { filter: Alpha(Opacity=30,

FinishOpacity=0, Style=1, StartX=0, StartY=0,

FinishX=100, FinishY=100)}

--

/style

在图象连接后加代码:

IMG SRC="images/js.jpg" class="alpha"

css 层叠样式表 解释

* 整个文件

{

border: 0;没有边框

margin: 0;外间距为0

padding: 0;内间距为0

}

a

{

text-decoration: none; 所有默认超链接没有下划线

}

body 所有内容

{

background: #000000; 背景色为黑色

color: #777; 文字颜色为#777

margin: 0 auto; 样式左右局中 上下顶头

padding: 50px; 内间距50像素

position: relative; 对象不可层叠

width: 620px; 样式宽度为620px

}

h1

{

background: inherit; 背景色继承父本

/*

border-bottom: 1px dashed #ccc; 被注视掉了

*/

color: #933; 文字颜色#933

font: 17px Georgia, serif; 文字属性

margin: 0 0 10px; 外间距 上左右0像素 下10像素

padding: 0 0 5px; 内间距 上左右0像素 下5像素

text-align: center; 文字水平局中

}

p

{

clear: both; 清除浮动

font: 10px Verdana, sans-serif; 文字样式

padding: 10px 0; 内间距 上下10像素 左右0像素

text-align: center; 文字水平局中

}

p a

{

background: inherit; 段落背景色继承父色

color: #777; 超链接文字颜色为#777

}

p a:hover

{

background: inherit;

color: #000; 段落超链接鼠标经过时颜色为黑色

}

/* =Hoverbox Code

----------------------------------------------------------------------*/ 被注视掉

.hoverbox

{

cursor: default; 鼠标样式不显示

list-style: none; 清除样式

}

.hoverbox a

{

cursor: default; 鼠标样式不显示

}

.hoverbox a .preview

{

display: none; 鼠标样式不显示

}

.hoverbox a:hover .preview 鼠标经过

{

display: block; 鼠标样式显示

position: absolute; 对象不可层叠

top: -33px; 据顶端-33个像素

left: -45px; 据左边-45个像素

z-index: 1; 纵坐标为1

}

.hoverbox img boverbox里的图片

{

background: #fff; 背景色白色

border-color: #aaa #ccc #ddd #bbb; 边框上右下左的颜色

border-style: solid; 边框为实线

border-width: 1px; 边框1个像素

color: inherit; 文字颜色继承父色

padding: 2px; 内间距2个像素

vertical-align: top; 竖直顶端对齐

width: 100px; 宽度100像素

height: 75px; 高度75像素

}

.hoverbox li hoverbox里的li标记

{

background: #eee; 背景色 #eee

border-color: #ddd #bbb #aaa #ccc;边框上右下左的颜色

border-style: solid;边框为实线

border-width: 1px;边框1个像素

color: inherit;文字颜色继承父色

display: inline;内联对象

float: left;左浮动

margin: 3px;外间距3像素

padding: 5px;内间距5像素

position: relative;对象不可层叠

}

.hoverbox .preview

{

border-color: #000; 边框颜色#000

width: 200px; 宽度200像素

height: 150px; 高度150像素

}

给分吧 很辛苦的哦

创建css层叠样式表

如果想让CSS控制页面的样式，就需要加载CSS文件，这里有四种方式，行内方式、内嵌方式、链接方式、导入方式。

【行内方式】

行内样式是所有加载CSS方式种最为直接的一种，他直接对HTML的标记使用style属性，然后将CSS代码直接写在其中。

p style=”background:#900; border:1px #333 dashed; margin:5px;”CSS学习网/p

【内嵌方式】

内嵌方式是将CSS写在head/head之间，并且用style/style标记进行声明，如：

html

head

title小叶子/title

style type=”text/css”

.red { color: #900; font-size:14px; font-weight:bold;}

/style

/head

body

p class=”red”小叶子/p

/body

/html

【链接方式】

链接方式是使用频率最高的，也是最实用的方法。他将HTML页面本身与CSS样式分离为两个或者多个文件，视线了页面框架HTML代码与CSS代码的完全分离，是的前期制作和后期维护都十分方便，网站后台的技术人员与美工设计者也可以很好的分工合作。

而其对于同一个CSS文件可以连接到多个HTML文件中，甚至可以连接到整个网站的所有页面中，似的网站整体风格统一、协调，并且后期维护的工作量也大大减少。样式为：

html

head

title小叶子/title

link href=”style.css” type=”text/css” rel=”stylesheet”

/head

body

… …

/body

/html

===============================================

楼主的图片几乎都是使用绝对路径，这样不便迁移的，使用相对路径更好。

css层叠样式表有哪几种类型

CSS（Cascading Style Sheets）

层叠样式表

优势：

CSS可以提高页面的浏览速度。

缩短改版时间，降低维护费用。

强大的字体控制能力和排版能力。

css容易编写。

可以一次设计随处发布。

更好的控制页面布局。

实现表现和结构、内容相分离。

更方便搜索引擎的搜索/page Rank

样式规则：

语法：选择器｛属性1：值1；属性2：值2；...属性N：值N；｝

选择器就是要改变页面中的哪些标签元素

声明要用｛｝括起来，；结束

如果属性中包含空格要用“”括起来

可以指定多个选择器使用相同的样式

样式表：

外部样式表，新建.css文件，在文件中写入样式规则link rel="stylesheet" href = "xxx.css"

内联样式表，在元素中添加style属性

嵌入式样式表，在html使用style标签，style type="text/css"/style

选择器：

元素选择器，元素名

id选择器，用#id

类选择器，用.class

后代选择器，选择器1 选择器2

css深化：

就近原则，！important提高元素优先级，伪类选择器，伪对象选择器，@import导入其他css文件，响应式布局可以解决多设备的兼容问题。

文本属性：

font-family：字体

font-size：字体大小

font-style：斜体

font-weight：粗体

color：颜色

line-height：行高

letter-spacing：字符间距

text-decoration：文本修饰

text-overflow：文字溢出处理

white-space : no wrap

text-overflow:hidden

text-align：文本对齐

背景属性：

background-color：背景颜色

background-image：背景图片

background-repeat：背景重复

background-attachment：背景图片附着

基于占满一整行与否，标签分为两大类（文档流）：

占满：行级元素（div，p，h1~h6）

不占满：行内元素（span，）

定位属性：

position：定位

absolute：绝对定位

relative：相对定位

css怎么让两张图片叠加，不用background只用img叠加

css层叠图片代码：

pre name="code" class="html"div style="position: relative;"//这个层为外面的父层，只需设置相对位置样式即可

div style="position: absolute;"//这个为里面要叠加的层，只需设置绝对样式

img src="img/sunshuai.jpg"///这个为层里面的内容图片

/div

img src="20110110/871_129391305700000000.jpg"///这个为父层内容

/div

或者：

div style="position:absolute;z-index:1;left:10px;top:10px;"

img src="a.gif" width="100" height="100"/div

div style="position:absolute;z-index:2;left:60px;top:60px;"

img src="b.gif" width="100" height="100"/div

扩展资料：

CSS 中重要的叠加层叠概念：

1. 层叠上下文 (Stacking Context)

层叠上下文 (堆叠上下文, Stacking

2. 层叠等级 (Stacking Level)

层叠等级 (层叠水平, Stacking Level) 决定了同一个层叠上下文中元素在z轴上的显示顺序的概念，普通元素的层叠等级优先由其所在的层叠上下文决定。层叠等级的比较只有在同一个层叠上下文元素中才有意义。

在同一个层叠上下文中，层叠等级描述定义的是该层叠上下文中的元素在Z轴上的上下顺序。

3. 层叠顺序 (Stacking Order)

层叠顺序 (层叠次序, 堆叠顺序, Stacking Order) 描述的是元素在同一个层叠上下文中的顺序规则，从层叠的底部开始，共有七种层叠顺序：

（1）背景和边框：形成层叠上下文的元素的背景和边框。

（2）负z-index值：层叠上下文内有着负z-index值的定位子元素，负的越大层叠等级越低；

（3）块级盒：文档流中块级、非定位子元素；

（4）浮动盒：非定位浮动元素；

（5）行内盒：文档流中行内、非定位子元素；

（6）z-index: 0：z-index为0或auto的定位元素， 这些元素形成了新的层叠上下文；

（7）正z-index值：z-index 为正的定位元素，正的越大层叠等级越高；

同一个层叠顺序的元素按照在HTML里出现的顺序层叠；第7级顺序的元素会显示在之前顺序元素的上方，也就是看起来覆盖了更低级的元素。

参考资料来源：百度百科-css