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
当前名称:css图片层叠样式,css图片层叠样式怎么用
文章路径:http://pwwzsj.com/article/dsdijsp.html