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

CSS 文字替代图片下载失败情况

阅读更多
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" > 
 <head><title>Text Replacement</title>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" href="site.css"   media="all"    type="text/css" />
  <link rel="stylesheet" href="page.css"   media="all"    type="text/css" />
 </head>
 
 <body>
 
 <h1>Text Replacement</h1>
 <h2 id="h2" >Heading ddd2<span></span></h2>

 </body>
</html>

 

CSS:

 

#h2 {
    position: relative;
    width: 250px;
    height: 76px;
    overflow: hidden;
}
/*
 * span里面的图片和h2中字的长宽一样,如果当图片显示不出来时候,自然就是字来充当
 */
#h2 span {
    position: absolute;
    width: 250px;
    height: 76px;
    left: 0;
    top: 0;
    background: url("heading2.jpg") no-repeat;
}

 

分享到:
评论

相关推荐

    掉链图片的替代图片方法特效代码

    这样,当原图加载失败时,CSS选择器`.image.error + .fallback-image`会让替代图片显示出来。 5. 使用帮助: - 确保替代图片URL是可访问的,并且在代码中正确设置。 - 对于多个图片,可以将上述JavaScript代码...

    html语言全集包括框架图片文字设计

    我们需要指定`src`属性来提供图片的URL,`alt`属性提供图片的替代文本,这对于视觉障碍的用户和加载失败时的显示非常重要。此外,还可以使用`width`和`height`属性控制图片尺寸。 至于“表格设计”,HTML的`&lt;table&gt;...

    文字超出限制在末尾加省略号,showToast消息提示接口,在图片未能正确加载时 显

    常见的做法是在图片未能正确加载时,显示一个友好的错误提示,或者提供一个备选的替代图片。 4. **技术实现说明**:文档中提到的技术实现细节可能包含两个方面: - 文本超出限制时添加省略号,这通常是通过编程...

    CSS 背景属性5个应用实例.

    为了解决这个问题,实例4则引入了一个额外的标签并通过定位将背景图片置于文字之上,这样即使图片下载失败,仍能保留基本的文本内容。 接下来,第三个实例展示了自适应按钮的制作。传统的做法是为不同长度的按钮...

    CSS样式中文语法名令完全注释.pdf

    本篇将详细解析CSS中的字体属性,帮助你更好地理解和运用这些命令,让你的网页文字更加美观。 1. **font-family** 属性用于指定文本的字体。你可以提供一个字体列表,浏览器会按照顺序尝试使用这些字体。例如,`...

    ext img 选择

    其次,`img`组件还支持其他配置,如`width`和`height`来设置图片尺寸,`alt`提供替代文本,`cls`用于添加自定义CSS类以实现样式定制。例如: ```javascript items: [{ xtype: 'image', src: 'path/to/your/image....

    shendiaoxialv.zip_shendiaoxialv

    `&lt;img&gt;`标签的`alt`属性提供了图片的替代文本,对于访问障碍用户和加载失败时非常有用。同时,优化图片大小和格式(如使用JPEG、PNG或SVG)能提高页面加载速度。 4. 页面布局:一个常见的布局策略是使用网格系统,...

    wordpress整合ueditor下载wp-ueditor2

    UEditor是由百度开发的一款开源的JavaScript富文本编辑器,它提供了强大的文字编辑、图片上传、多媒体插入等功能,让网站的内容创建变得更加便捷。其特色包括简洁的界面、良好的性能以及对各种浏览器的良好兼容性。 ...

    javascript-image_alternate_text:返回图像的替代文本

    `alt`属性的值通常是对图像内容的文字描述,当图像无法显示或加载时,浏览器会显示这个替代文本。此外,搜索引擎也依赖`alt`文本来理解图片的内容。 在JavaScript中,你可以通过以下方式获取图像元素的`alt`文本: ...

    js钢琴按钮波浪式图片排列效果代码分享

    1. 定义图片容器的CSS样式,确保图片能够正确排列。 2. 创建一个JavaScript对象`Bookrack`,定义缩放比例、图片间距等参数。 3. 初始化图片数组,监听鼠标悬停事件。 4. 当鼠标移到图片上时,计算相邻图片的缩放比例...

    editplus 代码编辑器html c++ jsp css

    由于基本无法编辑录制的文件,所以录制的时候为了避免录制失败,推荐纯粹使用键盘操作,以下是比较关键的几个键盘组合: Ctrl+F = 调出查找对话框 Ctrl+H = 调出替换对话框 Alt+F4 = 关闭作用,比如,关闭查找...

    HTML面试题

    1. **`alt`属性**: 当图像无法显示时(例如网络连接失败或用户使用屏幕阅读器),`alt`属性会显示替代文本。这对于提高网页的可访问性至关重要。 2. **`title`属性**: 提供了关于元素的建议性信息,当鼠标悬停在元素...

    html.zip_简单的网页html

    标签则用于插入图片,src属性指定了图片的路径,alt属性提供图片的替代文字,以便于屏幕阅读器或图片加载失败时使用。 5. 列表:HTML提供了无序列表()和有序列表(),以及列表项()。无序列表用圆点表示,有序列表则...

    常用HTML标记使用技巧 HTML标记

    - `&lt;img&gt;` 标记插入图片,`src` 属性指定图片源,`alt` 提供图片的替代文字,用于屏幕阅读器或者图片加载失败时。 6. **列表标记**: - `&lt;ul&gt;` 和 `&lt;li&gt;` 用于创建无序列表,而 `&lt;ol&gt;` 和 `&lt;li&gt;` 用于创建有序...

    HTML网页设计指导

    例如,`描述性文字"&gt;`用于插入图片,`src`属性指定图片源,`alt`则提供替代文本,对于视觉障碍的用户或加载失败时尤其重要。 此外,HTML5引入了许多新的元素,如`&lt;header&gt;`、`&lt;footer&gt;`、`&lt;section&gt;`、`&lt;article&gt;`...

    pictures.portfolio

    它的`src`属性指定图片的URL,`alt`属性提供图片的替代文本,以供屏幕阅读器或加载失败时使用。例如: ```html 图片描述"&gt; ``` 3. **布局与样式**:为了美观地展示图片,可以使用`&lt;div&gt;`或`&lt;figure&gt;`元素进行...

    jQuery实现的表单提交滑动验证实例特效源码.zip

    滑动验证通常用于替代传统的验证码,用户需按照一定的轨迹滑动一个小块来完成验证,这种方式既简单又直观,减少了用户输入文字的麻烦。在这个实例中,我们将会看到如何使用jQuery和可能的一些CSS及HTML来实现这个...

    《网页制作》理论试题及答案.pdf

    20. **图像替代文本(Alt属性)**:`&lt;img&gt;`标签的`alt`属性提供替代文本,当浏览器不支持图像或图像加载失败时显示。 21. **删除站点**:在Dreamweaver中,删除站点只断开了本地文件与站点的关联,文件本身并未删除...

    jquery uploadify 实现批量上传,带进度显示,判断文件大小

    在IT行业中,前端开发经常会...首先,你需要在项目中下载`jQuery Uploadify`的压缩包,包含`uploadify.css`样式文件和`uploadify.js`脚本文件。在HTML文件中引入jQuery库和Uploadify的JavaScript及CSS文件: ```html ...

Global site tag (gtag.js) - Google Analytics