用CSS设置的4种样式的图片说明文本之03

最新推荐文章于 2022-06-23 20:41:39 发布

iteye_4537

最新推荐文章于 2022-06-23 20:41:39 发布

阅读量163

点赞数

文章标签： xhtml

浮在图片的半透明说明文本之二

1、效果图

2、HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head>  <meta http-equiv=content-type content="text/html; charset=gb2312">  <link rel="stylesheet" href="captions-2b.css" type="text/css" media="screen" /> <title>图片说明文字</title>  </head> <body> <div class="captioned_photo"> <img src="images/captions-2.jpg" alt="Cat Vase!" /> <p><span><strong>The Cat Vase:</strong> The cats are cute, white, with gold-trimmed ears and tails.</span></p> </div> </body> </html>

3、CSS代码

/*CSS STYLE SHEET FOR [captions-2a.html] Created by [Serein_Chan] Email: [Serein_Chan@foxmail.com] Author Blog:[http://blog.csdn.net/cxwen78] */ /*注释 */ /*body的样式 */ body { margin: 0; padding: 0; background-color: #fff; font: 62.5% Verdana, sans-serif; color: #4d4d4d; } p { margin: 0; padding: 0 0 1em 0; } .captioned_photo { position: relative;/*设置DIV块的定位类型，使得其所包含的子元素P进行绝对定位时能相对于DIV块来定位而不是HTML元素*/ width: 240px; display: block; margin: 1em 1em 1em 1em; padding: 1em; border: 1px solid #ccc; border-top-color: #eee; border-right-color: #ddd; border-bottom-color: #bbb; background: url(images/bg.gif) bottom left repeat-x;/*DIV块的渐变背景*/ line-height: 1em; text-align: left; } .captioned_photo p { position: absolute;/*绝对定位相对于最近的已定位的祖先元素*/ bottom: 2.25em; left: 1.375em; display: block; width: 240px; /* 为了匹配图片宽度而设置 */ margin: 0; padding: 0; background: url(images/caption-black.png) top left repeat-y;/*使用半透明的图片作背景实现透明层叠效果*/ font: .9em Verdana, sans-serif; letter-spacing:.05em;/*设置字符间的空白*/ color: #fff; } .captioned_photo p span { display: block; padding: 1em; } .captioned_photo img { margin: 0 0 -.0625em 0; padding: 0; }

参考：《The Art & Science of CSS》