文本替换与左外边距

一、文本替换

使用绝对定位和背景图片实现文本替换，当图片能正常加载时显示图片，否则显示文字。

<div id="mydiv">
	You and me
	<span></span>
</div>

#mydiv{
	position: relative;
	width: 230px;
	height: 154.5px;
	overflow: hidden;
}
#mydiv span{
	position: absolute;
	width: 230px;
	height: 154.5px;
	left: 0;
	top: 0;
	background-image: url("images/you-and-me.jpg");
	background-size: 230px 154.5px;
}

• 图片正常加载

• 图片加载出错

二、左外边距

使用绝对定位和左外边距将元素移出块状元素，实现把标题或图片放左边，内容放右边的效果。

<div class="left-margin">
	<h4 class="marginal">标题或图片等</h4>
	这里显示内容。
</div>

.left-margin{
	position: relative;
	margin-left: 150px;
}
.marginal{
	position: absolute;
	top: 0;
	left: -150px;
	margin: 0;
}

• 效果

参考资料

• 精通CSS与HTML设计模式