1.背景图像
只需将图像作为背景应用于主题元素
body {
background-image:url(/img/pattern.gif);
}
默认情况下,浏览器水平和垂直地重复平铺图像到整个页面。
在页面上使用垂直渐变。需要创建一个很高但很窄的渐变图像,然后使其水平平铺。
body{
background-image:url(/img/gradient.gif);
background-repeat:repeat-x;
}
但页面可能很长,这时候就需要添加一个背景颜色,背景图像会出现在背景颜色上面,当图像结束时,颜色就显示出来了,如果选择的背景颜色与渐变底部的颜色相同,那么颜色和背景颜色之间的转换就看不出来了。
body {
background-image:url(/img/gradient.gif);
background-repeat:repeat-x;
background-color:#ccc;
}
还可以设置背景图像的位置。假设要在站点的每个标题上添加一个项目符号,可以编写下面这样的代码:
h1{
padding-left:30px;
background-image:url(/img/ss.gif);
background-repeat:no-repeat;
background-position: left center;
}
2.圆角框
在CSS3以前,我们需要通过背景图像来制作圆角框的效果。
而在CSS3中的border-radius属性,却可以直接制造圆角框的效果。我们只需设置边框角的半径,浏览器就会实现这种效果。
.box {
border-radius:1em;
}
这是一个新属性,对于他的实际实现方式还有争议。所以在这个属性得到广泛使用之前,需要使用与浏览器相关的扩展调用它。当前,Firefox和Safari支持这个属性,所以可以使用-moz和-webkit前缀。
.box {
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
border-radius:1em;
}
浏览器生产商一直在试验CSS的新扩展。一些生产商率先实现了CSS的新特性,其他生产商还在努力。因此,为了避免与其他用户代理混淆或者破坏代码的有效性,可以通过在选择器,属性或值上添加与厂商相关的前缀来调用这些扩展。例如,Mozilla使用-moz前缀,Safari使用-webkit前缀。IE,Opera和所有主流浏览器都有相似的前缀。可以使用这些前缀访问每种浏览器特有的特性。
通过这种机制,可以在新的CSS3特性成为正式规范之前试用它们。
3.投影
简单的CSS投影技术,其原理是:将一个大的投影图像应用于容器div的背景。然后使用负的外边距便宜这个图像,从而显示数图像。
首先需要创建投影图像,使用PS。创建一个新的PS文件,其尺寸与图像的最大尺寸一样。创建一个800*800像素的文件。然后打开背景层并且填充一种
颜色,投影将放在这种颜色上面。让背景色保持白色。接着创建一个新的层并且填充上白色。然后,将这个层向左上方移动4或5个像素,然后对这个层应用4或5像素宽
的投影。保存并将其命名为shadow.gif
在HTML中的标记如下:
<div class="img-wrapper"><img src="dunstan.jpg" width="300" height="300" alt="dunstan prchard"/> </div>
为了产生投影效果,首先需要将投影图像应用于容器div的背景。因为div是块级元素,所以他们会水平伸展,占据所有可用空间。在这种情况下,我们希望div包围图像。可以显式地设置容器div的宽度,但是这么做会限制这种技术的用途。可以浮动div,让它在现代浏览器上产生"收缩包围"的效果。Mac上的IE 5.X不支持这种技术,可以对Mac上的IE 5.X隐藏这些样式。
.img-wrapper {
background: url(/img/shadow.gif) no-repeat bottom right;
clear:right;
float:left;
}
为了露出投影图像并产生投影效果,需要使用负的外边距便宜这个图像:
.img-wrapper img {
margin: -5px. 5px 5px -5px;
}
还可以给图像加上边框和一些内边框,从而产生类似照片边框的效果
.img-wrapper img {
background-color: #fff;
border:1px solid #a9a9a9;
padding:4px;
margin:-5px 5px 5px -5px;
}
这种技术对于大多数符合标准的现代浏览器都是有效的。但是,在IE6中,还需要添加如下规则
.img-wrapper {
background:url(/img/shodow.gif) no-repeat bottom right;
clear:right;
float: left;
position:relative;
}
.img-wrapper img{
background-color:#fff;
border:1px solid #a9a9a9;
padding:4px;
display:block;
margin:-5px 5px 5px -5px;
position:relative;
}
现在CSS3开始支持用box-shadow属性,这个属性需要4个值:垂直和水平偏移,投影的宽度(模糊程度)和颜色。
img{
box-shadow: 3px 3px 6px #666;
}
这在目前也是一个实验性的CSS3属性,所以目前需要使用Safari和Firefox扩展。不过,这个属性可以很快就得到广泛支持了
img {
-webkit-box-shadow : 3px 3px 6px #666;
-moz-box-shadow:3px 3px 6px #666;
box-shadow:3px 3px 6px #666;
}
4.不透明度
大多数现代浏览器支持CSS不透明度已经有相当一段时间了。假设要弹出一个警告消息,他应该覆盖在现有文档上面,同时你仍可以看到下面的东西
.alert {
backkground-color: #000;
border-radius: 2em;
opacity:0.8;
filter:alpha(opacity=80); /*proprietary IE code*/
}
CSS不透明度的主要问题是,除了对背景生效之外i,应用它的元素的内容也会继承它。因此,上面的代码会透过警告文本看到页面上的文本。如果使用非常高的不透明度和高对比度的文本,这可能不是问题。但是,如果不透明度地,框的内容就难以辨认。RGBa就是为了解决这个问题而设计的。
.alert {
background-color:rgba(0,0,0,0.8);
border-radius:2em;
}
最后一个数字是十进制的不透明度,所以0.8表示这个背景的不透明度是80%,换句话说,透明度是20%。值为1表示100%不透明度,值为0表示完全透明。
PNG透明度
PNG文件格式最大的优点之一是它支持alpha透明度。这这可以使设计具备真正的创意。但是,IE6不直接支持PNG透明度,而IE7和IE8支持。对于IE的老版本,有2种解决方法。
在IE6支持PNG透明度的方法是使用专有的AlphaImageLoader