`
lishumingwm163.com
  • 浏览: 337897 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论
阅读更多

 

很多新改版的网站都会在图片显示上下一些文章,比如加边框和背景之类的修饰,使之在视觉上有较之以往不同的新意。下面来模仿几个网站在图片+标题表现上的一些效果。

1.标题层叠在图片上,标题文字和背景半透明。鼠标经过边框换色。
Html
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>标题层叠在图片上,标题文字和背景半透明。鼠标经过边框换色。</title>
<style type="text/css">
body{background:#333}
*{border:none;text-decoration:none}
.wrap{margin:10px;position:relative}
.photo a{position:absolute;display:block;border:1px solid #666;}
.photo a:hover{border:1px solid #fff;}
.photo span{width:500px;background:#000;display:block;position:absolute;bottom:0;left:0;color:#fff;filter:alpha(opacity=60);-moz-opacity:0.6;opacity:0.6;font:bold 12px/30px Verdana, Arial; text-align:center;cursor:hand;}
.photo a:hover span{text-decoration:underline}
</style>
</head>

<body>
<div class="wrap">
<div class="photo"><a href="#">
<img src="http://www.dangbao.net/attachments/month_0809/i200894153036.jpg" border="0" alt=""/><span>标题层叠在图片上,标题文字和背景半透明。鼠标经过边框换色。</span></a& gt;</div>
</div>
</body>


2.鼠标经过图片,半透明的标题从下面出现。边框换色。
Html
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>鼠标经过图片,边框变色,图片上出现半透明文字</title>
<style type="text/css">
body{background:#333}
img{border:none}
.wrap{margin:10px;position:relative;}
.photo a{position:absolute;display:block;border:1px solid #999;padding:2px}
.photo a:hover{border:1px solid #fff;text-decoration:none}
.photo a span {display:none;cursor:hand;text-align:center;font:bold 12px/30px Verdana, Arial;}
.photo a:hover span{width:500px;margin:0 2px;background:#000;display:block;position:absolute;bottom:0;left:0;color:#fff;filter:alpha(opacity=60);-moz-opacity:0.6;opacity:0.6;}
</style>
</head>

<body>
<div class="wrap">
<div class="photo"><a href="#">
<img src="http://www.dangbao.net/attachments/month_0809/i200894153036.jpg" border="0" alt=""/><span>鼠标经过图片,边框变色,图片上出现半透明文字</span></a>< /div>
</div>
</body>

分享到:
评论

相关推荐

    Qt 窗口叠加透明,上面窗口可写文本和图片,下面窗口可展示图片或播放视频

    这个场景中提到的问题是实现了一个窗口叠加在另一个窗口上,上面的窗口用于显示文本和图片,下面的窗口则用于展示图片或播放视频。然而,遇到的一个挑战是当在上方窗口设置OSD(On-Screen Display)文字为某些特定...

    Android实现图片叠加效果的两种方法

    在Android开发中,图片叠加效果是一种常见的视觉设计需求,它能增强用户界面的美观性和交互体验。本篇文章将深入探讨两种实现图片叠加效果的方法,并提供详细的代码示例。 首先,第一种方法是通过Canvas进行绘制。...

    易语言透明叠加图片

    易语言透明叠加图片源码,透明叠加图片,画板_透明叠加图像,RGB_Alpha,CreatePen,CreateSolidBrush,FillRect,GetDC,LineTo,MoveToEx,ReleaseDC,DeleteObject

    delphi 两张图片叠加

    // 将叠加后的图片显示在新的TImage组件上,或者保存到文件 TImage.Create(nil).Picture.Graphic := CombinedBitmap; // 或者 CombinedBitmap.SaveToFile('combined_image.png'); // 释放资源 Bitmap1.Free; ...

    c#实现几个图片叠加到一起

    在C#编程环境中,实现多个图片的叠加是一个常见的图像处理任务,主要涉及到图像处理库的使用,如System.Drawing namespace中的类。在这个Windows桌面程序中,我们可能会使用Bitmap、Graphics、Image等类来完成这个...

    图片轮播素材 左右按钮切换 图片叠加

    在网页设计和开发中,图片轮播是一种常见的交互元素,用于展示一组图片或内容,而“图片轮播素材 左右按钮切换 图片叠加”这一主题涵盖了几个关键知识点,包括图片轮播的设计、左右按钮的交互功能以及图片叠加效果。...

    YUV图像上面实现OSD字幕叠加算法程序

    在这个名为“YUV图像上面实现OSD字幕叠加算法程序”的项目中,我们探讨了如何在YUV格式的原始视频数据上实现这一功能。 YUV是视频编码的一种颜色空间,广泛用于数字视频系统中,因为它可以有效地减少存储和传输的...

    jquery图片叠加点击轮换效

    基础的实现方式可能是:当用户点击图片时,下一张图片会叠加在当前图片之上,然后淡入显示,而旧图片则淡出消失。这可以通过jQuery的`.click()`方法来绑定点击事件,以及`.fadeIn()`和`.fadeOut()`方法来实现淡入...

    VC图片叠加和添加文字_vc++_图片叠加_

    在VC++编程环境中,图片叠加和添加文字是一项常见的图像处理任务,这通常涉及到对位图(Bitmap)对象的操作。在本教程中,我们将探讨如何利用Microsoft的MFC(Microsoft Foundation Classes)库或直接使用GDI+...

    bmp图片OSD叠加--包含图片和程序

    3. **坐标定位**:确定图片在屏幕上的叠加位置,这通常涉及到坐标系统的理解,以及可能的缩放处理。 4. **颜色处理**:根据描述,该功能支持多种颜色,这意味着你需要对颜色进行处理,可能是简单的颜色替换,也可能...

    VS2012 + Opencv2.4.9实现PNG背景透明,图片叠加,图片读取,显示

    在本文中,我们将深入探讨如何使用Visual Studio 2012(VS2012)与OpenCV 2.4.9库来处理PNG图像,特别是实现背景透明、图片叠加以及图片的读取和显示。OpenCV是一个强大的计算机视觉库,广泛应用于图像处理和计算机...

    Android 图片叠加banner效果 仿mac QQ音乐图片轮播

    在Android开发中,实现“Android 图片叠加banner效果 仿mac QQ音乐图片轮播”是一项常见的需求,尤其在设计用户界面时,为了增加视觉吸引力,许多应用会采用类似Mac QQ音乐顶部的图片轮播功能。这个功能的核心在于...

    STM32-FSMC-TFT.zip_STM32 2.4寸_STM32 图片TFT_TFT 字符_stm32 tft_图片叠加

    在本案例中,"STM32-FSMC-TFT.zip" 提供了一个示例程序,展示了如何在2.4英寸的TFT(Thin Film Transistor)液晶显示屏上处理图像和字符显示,特别是如何实现图片的叠加功能。 STM32的FSMC(Flexible Static Memory...

    Opencv叠加透明图片(包括旋转和缩放)

    为了正确地处理叠加图片的边界,我们需要确定一个合适的边界框,使得叠加图片在旋转和缩放后仍然位于背景图片内。这通常涉及到计算新的边界框尺寸和坐标,然后对背景图片进行裁剪或填充。 **步骤4:透明度处理** 在...

    设置并叠加透明图片

    在VC++环境中,实现设置并叠加透明图片是一项常见的任务,特别是在开发GUI应用程序时。这篇文章将深入探讨如何在MFC(Microsoft Foundation Classes)框架下完成这一操作。MFC是微软为C++开发Windows应用程序提供的...

    VC++ 设置并叠加透明图片

    在VC++编程环境中,设置并叠加透明图片涉及到图像处理和图形用户界面(GUI)的知识。这一过程通常包括读取图片、处理透明度、合并图像以及显示结果。在本例中,我们将探讨如何实现这一功能,重点是理解透明度的概念...

    BCB 给图片的16进制中叠加字符,图片字符叠加器,图片字符叠加软件

    标题 "BCB 给图片的16进制中叠加字符" 涉及到的是一个使用 Borland C++ Builder(BCB)开发的工具,该工具具有在图片的16进制数据上叠加字符的功能。这通常用于图像处理或者安全加密领域,通过对原始图像的数据进行...

    图像叠加程序把两幅图像叠加在一起

    在图像处理领域,图像叠加是一种常见的技术,用于将两幅或多幅图像组合成一幅新的图像。这个过程可以用于创建特效、合成图像或者进行数据分析。在本案例中,我们讨论的是利用OpenCV库来实现图像叠加的功能。OpenCV...

    实现在图片上叠加文字

    标题“实现在图片上叠加文字”暗示了我们要讨论的是一个C++程序,因为关键文件是`AddText2BMP.cpp`和`AddText2BMP.h`,这通常代表C++源代码文件,而`.cpp`和`.h`是C++的源码和头文件扩展名。 首先,我们需要理解BMP...

Global site tag (gtag.js) - Google Analytics