`
mbn
  • 浏览: 23329 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

HTML 辅助图片一律用背景处理

阅读更多
用 XHTML+CSS 布局,有一个技术一开始让你不习惯,应该说是一种思维方式与传统表格布局不一样,那就是:所有辅助图片
都用背景来实现。类似这样:
BACKGROUND: url(images/bg_poem.jpg) #FEFEFE no-repeat right bottom; 
尽管可以用 直接插在内容中,但这是不推荐的。这里的"辅助图片"是指那些不是作为页面要表达的内容的一部分,而
仅仅用于修饰、间隔、提醒的图片。例如:相册中的图片、图片新闻中的图片,上面的 3d 盒模型图片都属于内容的一部分,
它们可以用 元素直接插在页面里,而其它的类似 logo,标题图片,列表前缀图片都必须采用背景方式或者其他 CSS 方
式显示。
这样做的原因有 2点:
  将表现与结构彻底相分离(参考阅读另一篇文章:《理解表现与结构相分离》),用 CSS 控制所有的外观表现,便于改
版。 
  使页面更具有易用性,更有亲和力。例如:盲人使用屏幕阅读机,用背景技术实现的图片就不会被朗读出来。
分享到:
评论

相关推荐

    个人辅助纯HTML网站

    2. **自定义设置背景图**:这是一个用户友好的特性,让网站使用者可以根据个人喜好更改网站的背景图片,提升用户体验。实现这一功能可能需要在HTML中添加CSS样式控制,并通过JavaScript或jQuery来处理用户上传和应用...

    紫色淡雅群山PPT背景图片.zip

    "21.JPG"可能是另一张背景图片,用户可以根据实际需要选择使用。"第一PPT.url"则可能是一个快捷方式,链接到一个专门提供PPT资源的网站,方便用户查找和下载其他相关的素材。 在实际应用中,设计师可以根据PPT的...

    吸粉引流工具 photoshop网页html静态版 在线ps照片图片处理网站源码.rar

    标题中的“吸粉引流工具 photoshop网页html静态版 在线ps照片图片处理网站源码.rar”表明这是一款基于HTML和Photoshop技术的在线图片编辑平台,主要用于吸引用户并帮助引流。这款工具提供了类似Photoshop的功能,但...

    卡通黑板幻灯片背景图片.zip

    在制作PPT时,选择合适的背景图片至关重要,因为它不仅能够增强视觉效果,还能辅助传达主题信息,提高观众的注意力。 在压缩包的文件列表中,我们可以看到以下三个文件: 1. "www.1ppt.com.html":这可能是一个链接...

    html5散花动态背景

    此外,CSS3也是HTML5动态背景的重要辅助工具。CSS3的新特性,如变换(transform)、过渡(transitions)和动画(animations),可以让元素动态地改变样式,增强视觉效果。在这个案例中,开发者可能结合CSS3,对花瓣的大小...

    jquery实现大背景图片切换导航栏特效

    - 使用CSS3的`transition`属性为背景图片切换添加平滑过渡效果。 3. **jQuery代码**: - `$(document).ready()`:当页面加载完成后执行的函数,用于初始化背景图片和导航栏。 - `$('nav a')`:选择所有导航链接...

    HTML5+CSS3网页美化与布局单元3 网页图片与背景的美化与布局.docx

    HTML5 提供了多种方式来处理网页中的图片,其中最常用的是`<img>`标签。`<img>`标签用于插入一张图片,并通过`src`属性指定图片的URL,确保浏览器知道在哪里找到图片。`alt`属性是必需的,它提供了图片的替代文本,...

    html5 canvas蓝天白云背景动画特效.zip

    总的来说,这个压缩包提供的是一种使用HTML5 Canvas和jQuery创建动态背景动画的方法,涉及到的知识点包括Canvas绘图API的运用、jQuery的事件处理和动画效果,以及HTML和CSS的布局与样式设计。对于前端开发者来说,这...

    解决PNG图片在IE6中背景不透明方法

    IE6并不完全支持PNG8和PNG24格式中的Alpha通道,这导致了图片背景无法透明显示。为了解决这个问题,开发者们开发了一些技巧和工具,其中一种常见的解决方案是使用JavaScript库,如`clear_png.js`。 `clear_png.js`...

    图片背景切换的幻灯片Jquery插件

    【标题】:“图片背景切换的幻灯片Jquery插件”是前端开发中常见的功能,主要应用于网站设计,特别是那些需要展示多张图片并希望以动态、吸引人的方式进行切换的场景。这种插件通常利用JavaScript库Jquery的强大功能...

    H5炫酷登录页 视频背景 包含素材

    在本例中,虽然主要的背景是视频,但可能还有一些辅助的图片,如按钮 hover 状态的图像,或者在表单错误时显示的图标。使用SVG图像可以保证在不同分辨率下都保持清晰。 4. **js**:JavaScript文件负责处理页面的...

    小米商城(html+css+js)必要图片压缩包.rar

    在小米商城的秒杀功能中,可能需要用到JavaScript来处理图片的点击事件、轮播图的自动切换、商品加载动画等。例如,可以使用`addEventListener`监听图片点击,`setTimeout`或`setInterval`实现定时更新,以及`CSS3`...

    HTML5全屏幻灯片背景切换效果.zip

    此外,考虑到SEO(搜索引擎优化)和可访问性,源码中可能会包含语义化的HTML元素,如、、等,以及alt属性来描述图片内容,确保屏幕阅读器和其他辅助技术能正确解析页面内容。 总结来说,“HTML5全屏幻灯片背景切换...

    12.Bootstrap图片与辅助样式.rar

    这个压缩包“12.Bootstrap图片与辅助样式.rar”显然是一个关于如何使用Bootstrap处理图片和辅助样式的教学资源。从标签“C#”我们可以推断,虽然Bootstrap主要是一个HTML、CSS和JavaScript框架,但可能在讲解中会...

    CSS3实现的全屏背景图片缩小渐变切换效果源码.zip

    在解压后,这个文件可能是HTML、CSS和可能的JavaScript文件,其中HTML文件用于结构,CSS文件包含上述提到的全屏背景图片和渐变切换效果的样式规则,而JavaScript文件可能会辅助处理某些交互逻辑或动画控制。...

    135编辑器模板图片替换神器,135编辑器背景图片下载

    本压缩包文件“135编辑器模板图片替换神器”是为135编辑器用户量身打造的一款辅助工具,特别针对模板中的图片替换。这个工具由易语言编写,易语言是一种以中文编程为基础的编程语言,旨在降低编程门槛,使更多人能够...

    网页视频背景源码

    在视频背景的应用中,可能包括用于预加载视频的图片或者其他辅助元素。 `dist`目录可能包含编译或优化后的资源文件,比如经过压缩和合并的CSS或JavaScript文件,以便提高页面加载速度。 最后,`css`目录中的样式表...

    HTML5全屏星空背景动画特效

    3. **CSS3**:虽然主要依赖Canvas,但CSS3也可能用于辅助实现全屏背景效果,例如设置背景填充、透明度、过渡和动画效果,以及确保页面在不同设备和屏幕尺寸上的响应式布局。 4. **随机数生成**:在生成星空时,需要...

    蓝色斜纹背景CSS3模板

    蓝色斜纹背景可能使用了`linear-gradient`线性渐变或者`repeating-linear-gradient`重复线性渐变来构建。例如,代码可能会这样写: ```css body { background-image: linear-gradient(45deg, #00bfff 25%, ...

    CSS3和HTML5图片加工前后对比代码.zip

    这个压缩包“CSS3和HTML5图片加工前后对比代码.zip”显然是一个包含示例代码的集合,旨在展示如何使用这些技术对图片进行处理和呈现,以及与传统方法的对比。 首先,CSS3(层叠样式表第三版)引入了许多新的选择器...

Global site tag (gtag.js) - Google Analytics