用CSS设置的4种样式的图片说明文本之04_图片css样式设置成一样-优快云博客

本文链接：https://blog.youkuaiyun.com/cxwen78/article/details/6610368

本文介绍了如何使用CSS实现图片说明文字的布局，包括HTML结构、CSS样式以及跨浏览器兼容性考虑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

偏移的说明文本

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标记定义的字符集是支持中文的gb2312-->
		<meta http-equiv=content-type content="text/html; charset=gb2312">
		<!--链接外部CSS样式 -->
		<link rel="stylesheet" href="captions-3.css" type="text/css" media="screen" />
		<title>图片说明文字</title>
		<!--[if lt IE 7]>
		<style type="text/css">
		.captioned_photo p {
			background: none;
			filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale, src='images/caption-white.png');
			}
		</style>
		<![endif]-->
	</head>
	<body>
          <div class="captioned_photo"> <img src="images/captions-3.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-3.html] 
	Created by [Serein_Chan]
	Email: [Serein_Chan@foxmail.com]
	Author Blog:[http://blog.youkuaiyun.com/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;
	width: 242px;/*下面的图片样式设置了1px的边框，所以多出了2px宽度*/
	text-align: left;
	display: block;
	margin: .5em 0 .5em 1.25em;
	padding: 0;
	border: 3px solid #333;
	line-height: 1em;
	}
.captioned_photo p {
	position: absolute;
	bottom: 14px;
	left: 0;
	display: block;
	width: 240px; /* 这是为匹配图片而设置的宽度 */
	margin: 0 0 0 1.5em;/*设置标题向左的偏移量*/
	padding: 0;
	border: 1px solid #666;
	border-right-color: #000;
	border-bottom-color: #000;
	background-color: #111;
	font: .9em Verdana, sans-serif;
	letter-spacing:.05em;
	color: #fff;
	}
.captioned_photo p span {
	display: block;
	padding: .75em;
	}
.captioned_photo img {
	margin: 0;
	padding: 0;
	display: block;
	border:1px solid #fff;
	}

参考：《The Art & Science of CSS》