`
haofeng82
  • 浏览: 144474 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

通过css改变图片显示的内容

CSSXHTMLHTML 
阅读更多

这种情况主要用于需要更换皮肤的地方，需要将图片的资源写在css里面。真正的资源是在 background:url(xxxxx);中，src属性中的是一张透明的图片而已

不多说了，代码如下：

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
img.a{
background:url(pic2.jpg);
width:600px;
height:600px;

}
img.b{
background:url(pic1.gif);
width:600px;
height:600px;

}
</style>
</head>

<body>
<div>
<img src= "src.gif" width="500" height="500" class="a" onclick="this.className ='b'" ></img></div>

</body>
</html>

分享到：
| javascript 实现多张图片轮流展示效果
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    纯css3图片导航点击显示动画图片列表和图片内容展示

    通过上述CSS3特性，我们可以创建一个既美观又互动性强的图片导航，用户点击导航项时，不仅可以显示动画效果，还能呈现相应的图片列表和内容。同时，结合JavaScript和HTML，我们可以进一步增强交互性，比如添加动态...

    CSS3悬停放大图片两边模糊显示.zip

    2. **应用`:hover`伪类**：当鼠标悬停在图片上时，通过`:hover`选择器改变图片的样式，例如使用`transform: scale(1.2)`将图片放大120%。 3. **模糊效果**：对于图片的两侧，可以创建两个额外的图片副本或者使用CSS...

    纯CSS图片流畅缩放显示详情代码，鼠标移到图片上后图片会缩小，同时下方显示产品的文字描述，兼容主流浏览器

    在IT行业中，CSS3是一...这样，我们就可以实现一个兼容主流浏览器的纯CSS图片流畅缩放显示详情的代码。通过这样的设计，用户可以在不离开当前页面的情况下，轻松获取产品的更多信息，从而提高网站的交互性和用户体验。

    CSS鼠标经过图片显示详细信息jquery特效

    当鼠标悬停在图片上时，可以通过`hover`伪类来改变图片的样式，如增加透明度或改变背景色，同时展示详细信息区域。CSS3中的`transition`属性可用于平滑地过渡这些变化，提供更流畅的用户体验。 接下来是jQuery的...

    jQuery+CSS实现图片感应鼠标高亮显示当前图片

    在本例中，jQuery将被用来监听鼠标的移动事件，并动态地改变图片的样式。 1. **CSS基础**：CSS（层叠样式表）用于控制网页元素的样式，包括颜色、大小、位置等。在这里，我们需要创建两个CSS类，一个用于正常显示...

    图片层叠显示CSS样式

    通过添加事件监听器，我们可以控制图片的显示和隐藏，以及改变选定菜单的状态。例如，当用户将鼠标悬停在一个菜单项上时，对应的图片会展开；当用户点击一个菜单项时，该菜单项可以被高亮，同时其他菜单项恢复原状。...

    CSS3鼠标悬停图片显示遮罩特效代码

    总的来说，这个“CSS3鼠标悬停图片显示遮罩特效代码”通过HTML结构和CSS3样式实现了图片的动态遮罩效果，提升了用户体验。开发者可以根据自己的需求调整颜色、透明度、字体等细节，以适应不同的网站设计和内容展示...

    CSS3点击图片遮罩放大显示特效.zip

    在这个效果中，我们可能会用到`scale()`函数来改变图片的大小，比如`transform: scale(2);`将图片放大两倍。 3. **伪类选择器（Pseudo-classes）**：CSS3引入了更多的伪类选择器，如`:hover`、`:active`和`:focus`...

    css特效 DIV_CSS图片滚动效果

    将一组图片放在同一个div内，通过改变图片的`left`或`top`值，实现图片的进出滚动。 - **轮播组件**：通过创建多个图片容器，设置定时器改变当前显示的图片容器的可见性，实现图片的循环滚动。 - **CSS3动画**：...

    css 动态切换图片效果

    动态切换图片效果是CSS的一个重要应用，它可以让用户交互时或者根据特定条件改变图片显示，增加页面的互动性和视觉吸引力。下面将详细探讨如何使用CSS实现动态切换图片效果。 首先，我们需要准备HTML结构。一个简单...

    css实现图片切换

    在图片轮播中，我们可以用它来改变图片的显示状态。 4. **定时器（Timers）**：结合JavaScript的`setInterval`或`setTimeout`函数，可以定期更改CSS样式，从而实现自动切换图片的效果。 5. **伪类选择器（Pseudo-...

    纯css3图片分类过滤效果

    通过这个插件，用户可以根据类别筛选并显示相关图片，提供更加直观和交互式的用户体验。 首先，让我们了解CSS3中的关键特性在这个项目中是如何应用的： 1. **选择器**：CSS3引入了更强大的选择器，如类选择器、ID...

    纯div+css轮播图片切换图片

    这通常涉及到CSS的`display`属性，通过改变图片的可见状态来实现切换。例如，可以创建多个包含图片的div，然后利用CSS选择器和定时器来交替更改这些div的`display`属性，从而实现图片的切换效果。 二、电子相册 ...

    css3背景图片指定显示位置

    在CSS3中，背景图片的显示位置是一个非常重要的概念，特别是在网页设计中。它允许开发者精确控制元素背景图像的位置，从而实现各种视觉效果。本文将深入探讨如何使用CSS3来指定背景图片的位置，并通过实际示例来阐述...

    css3马赛克样式图片切换

    例如，可以为小屏幕设备设计更紧凑的马赛克布局，或者在大屏幕上增加更多的图片显示。 最后，为了优化性能，考虑使用CSS3的精灵图（CSS Sprites）技术，将多张图片合并成一张大图，减少HTTP请求，提高页面加载速度...

    CSS3的鼠标悬停图片显示文字动画特效.zip

    总的来说，"CSS3的鼠标悬停图片显示文字动画特效"是通过CSS3的强大功能实现的一种交互设计，它可以提升网站的用户体验，使内容展示更加生动有趣。结合JavaScript，还能实现更多高级交互，如延迟显示、多方向滑动等，...

    CSS3图片全屏显示特效.zip

    在CSS3中，全屏图片显示特效的实现主要依赖于以下几个关键知识点： 1. **响应式布局**：为了适应不同设备的屏幕尺寸，全屏图片特效通常会结合媒体查询（Media Queries）来实现响应式设计，确保图片在大屏幕和小屏幕...

    CSS3图片全屏显示 CSS3图片全屏显示代码下载.zip

    总的来说，实现全屏图片显示的关键在于利用CSS3的`background-size: cover`属性和JavaScript（可能涉及jQuery）进行动态切换。通过这样的技术组合，开发者可以创建出具有高度视觉冲击力的全屏背景图片效果。

    css3图片高亮突出显示.rar

    在CSS3中，图片高亮突出显示是一种常见的视觉效果，常用于吸引用户的注意力或强调特定内容。本示例中，"css3图片高亮突出显示.rar" 包含了一个简单的图片相册应用，利用JavaScript特效增强用户体验。我们将探讨如何...

    CSS3悬停图片旋转放大并遮罩显示文字动画特效

    本案例"CSS3悬停图片旋转放大并遮罩显示文字动画特效"就是一个很好的实例，它展示了如何通过CSS3实现响应式布局，以及在用户将鼠标指针悬停在图片上时，图片旋转放大，并在图片上方出现一个遮罩层以展示相关信息。...

Magicbox
Global site tag (gtag.js) - Google Analytics