给网页添加背景图像总结

1.固定宽度和可变宽度的圆角框

方法一:适用于新型浏览器,直接用border-radius属性

方法二:适用于旧版浏览器,IE6等

对于固定宽度圆角框,需要有两个图像,一个图像用于框的顶部,一个用于框的底部。

对于可变宽度圆角框,需用到滑动门技术(随着框尺寸的增加,大图像有更多的部分显露出来,这样就实现了框扩展的效果),这个方法需用到四个图像(top-left,top-right,bottom-left,bottom-right),bottom-left应用于主框div,bottom-right应用于外面的div,top-left应用于内侧的div,top-right应用于标题

对于可变宽度山顶角,创建曲线形的位图角蒙板,盖住正使用的背景颜色,就形成了曲线形框的效果,对于小曲线效果较好,但对于大曲线,会出现锯齿。和可变宽度圆角框一样,需要4个元素来应用4个角蒙板。

方法三:使用多个背景图像,用的方法也是四个背景图像,优点是可省去无用标记,Firefox和Opera的最新版本支持这个属性,IE不支持。

方法四:使用css3新特性boreder-image,这个属性允许指定一个图像作为元素的边框,图像被分成9部分,这9部分怎么分,要依据border-image设置,有3种方式,PX,百分数。其他详见border-image属性介绍(http://www.w3school.com.cn/cssref/pr_border-image.asp)

2.投影

方法一:适用于新型浏览器,直接用box-shadow属性(http://www.w3school.com.cn/cssref/pr_box-shadow.asp)

方法二:适用于所有浏览器,实现方法为,首先将一个大的投影图像应用于容器div的背景,然后使用负的外边距便宜这个图像

方法三:来自Clagnut的投影方法,不使用负的外边距偏移图像,而是使用相对定位来偏移图像。

3.不透明度

方法一:使用filter属性(http://www.runoob.com/cssref/css3-pr-filter.html)

方法二:background-color:用rgba设置

PNG透明度

a.PNG文件格式最大的优点之一是它支持alpha透明度,第一个规则使用专有的过滤器加载PNG并应用alpha透明度,原来的背景图像仍然会显示,所以第二个规则是隐藏原来的背景图像。

b.使用IE PNG fix技术,需使用专有css扩展-行为(behavior)

4.CSS视差效果

视差滚动,实现方法是创建几个不同的背景图像,每个背景图像有不同的位置。

5.图像替换

使用文本图像时,不愿意将其直接嵌入页面中,就有了图像替换。图像替换,是先像平常一样添加文本,然后使用css隐藏文本并在它的位置上显示背景图像。这样,搜索引擎依然可以搜索HTML文本,如果禁用css,文本也会显示。

实现方法

a.FIR,最早最流行的,把要替换的文本放在span标签内,然后将替换图像作为背景图像应用于标题元素,并将span的display值设为none。缺点是,许多屏幕阅器会自动忽略display值为none或visibility值为hidden的元素,因此会完全忽略这个文本。

b.Phark,对标题进行非常大的负值文本缩进,缺点是在关闭图像但是打开css时文本也不会显示。

c.sIFR,用flash文件代替文本

时间: 2024-10-11 17:23:23

给网页添加背景图像总结的相关文章

用Canvas为网页添加动态背景

最近刚刚接到为微信公众帐号"玩转三里屯"制作首页的任务.考虑到页面只在手机中浏览,而且手机对canvas的支持又非常好,所以打算使用canvas做点不一样的动画. 首先来看下效果图. 要实现这样的动画普通的CSS3是鞭长莫及了,只能使用Canvas.好在使用canvas也非常简单. Step1. 新建一个画布(<canvas>)元素,并放在在所有按钮和logo的下方以免遮挡前面的元素. <canvas id="canvas" style="

为网页添加动态背景 (背景轮播)

为网页添加动态背景 (背景轮播) 设置网页背景 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>全屏背景</title> <script src="http://api.asilu.com/cdn/jquery.js,jquery.backstretch.min.js" type

为背景图像添加图像水印(位置随机)

1 <?php 2 /** 3 为背景图像添加水印(位置随机) 4 @param string $filename 需要添加水印的背景图片 5 @param string $water 水印图片 6 */ 7 function watermark($filename,$water){ 8 //获取背景图片的高和宽 9 list($b_w,$b_h) = getimagesize($filename); 10 //获取水印图片的高和宽 11 list($w_w,$w_h) = getimagesi

网页设计入门--使用css控制背景图像

一.设置背景页面背景颜色 background-color:color; 二.设置背景颜色给页面分块 通过background-color属性,不仅可以设置整个网页页面背景颜色,也可以对页面进行分块,分别设计每个分块的背景颜色 上图对应的代码为: 1 <html> 2 <head> 3 <title>my first text html</title> 4 <style type="text/css"> 5 6 body{ 7

背景图像坐标定位

实际上,如果没有发明image标签,可能就没有网页设计师这门职业. 然而对image标签的滥用可能导致纯修饰性的图像把页面弄乱.好在CSS使我们能够在页面上显示图像,而不需要让图像成为标记的一部分.实现方法是将图像作为背景添加到现有的元素中.  背景图像基础: 默认情况下,浏览器垂直和水平的重复显示背景图像,让图像平铺整个页面. 渐变效果:目前渐变非常时髦,你可能希望在页面上应用垂直渐变,为此需要创建一个很高但是很窄的渐变图像,然后将这个图像应用于页面的主体,并让他水平平铺. 因为这个渐变图像的

css008 给网页添加图片

css008 给网页添加图片 1.            css和<img>标签       1.<img>标签是html的添加图片的标签,一般为: <img src=”url.jpg” href=”describtion of the picture”> 2.css中添加图片:? 3.经常用来处理图片的css属性: A.border(边框):每条边框都可以设置不同的颜色样式和宽度 B.padding(填充):在边框和图片之间添加空间,空间中可以设置背景色等各种属性 C

如何在使用itext生成pdf文档时给文档添加背景图片

这个问题我在网上搜了很久,没有找到什么解决方案,需求其实很简单,就是添加背景图片.在解决这个问题之前,我们需要了解什么是背景图片?背景图片就是位于文档最底层的图片,文字和其他内容可以浮在它的上面.这又分为两种情况,一是局部的背景图片,一是全局的背景图片.局部的背景图片一般很少遇到,这里我要加的是整体上的一个背景图片.它往往是一些单纯的颜色图片,跟网页的背景图片一样.所以怎么做?我突发奇想,just do it,把图片加进去再说,试试居然成功了,很简单,像往常一样将图片加载到文档即可,只不过,要将

何时使用img标签,何时使用background-image背景图像

在什么情况下更适合使用HTML IMG标签来显示一个图像,而不是一个CSS有背景图像,反之亦然? 如下场景使用img标签比较合适: 1.如果图像是等内容的一部分或图表或人(真正的人,而不是股票图人),使用Img标签加上alt属性. 2.如果你想打印页面并且你想要的图像包括默认情况下使用IMG. 3.使用IMG(alt文本)图像有一个重要的语义时,比如一个警告图标.这将确保图像的意义可以很好的和user-agents沟通,包括屏幕阅读器. 4.如果你依赖于浏览器缩放图像比例并且可以呈现不错的效果时

切换背景图像综合练习题

练习题: 根据所学知识,使用CSS3知识,实现背景图片的切换效果(不依赖js,点击小图切换大的背景图) 任务 给每个列表定义不同的背景颜色 提示:使用结构伪类选择器:nth-of-type() 设置缩略图外形效果 提示:使用伪元素::after制作圆形效果 1.给每个缩略图设置不同的图片 提示:使用伪结构选择器:nth-of-type(),并且配合::after 2.给每个缩略图添加透明度蒙板效果 提示:使用伪类选择器::before给缩略图添加蒙板效果 3.鼠标悬浮在缩略图上时,修改缩略图上蒙