精通CSS-背景图像基础

来源：互联网发布：macbook pro便捷软件编辑：程序博客网时间：2024/06/05 20:35

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的背景。因为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