我有以下代码：
<!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>
<title>Test</title>
<style type="text/css">
body {font-family:Arial, Helvetica, sans-serif;font-size:12px;}
.article {width:600px;}
.image_container {float:left;margin-right:10px;}
h1 {height:50px;line-height:50px;background:url(left.png) no-repeat 0 0;}
h1 span {display:block;padding:0 10px;background:url(right.png) no-repeat top right;}
</style>
</head>
<body>
<div class="article">
<div class="image_container">
<img src="test.jpg" alt="test_img" />
</div>
<h1><span>Test heading</span></h1>
<p>
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
</p>
<p>
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
</p>
<h1><span>Test heading</span></h1>
<p>
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
</p>
</div>
</body>
</html>
您可以在这里查看演示：http: //easwee.net/floated_img_article/
问题： 图像可以有 2 种不同的宽度（3:2 比例 - 水平或垂直）。如您所见，标题有一个背景图像，它位于浮动图像的后面。
是否有一个css 解决方案可以让背景图像从标题文本开始的地方开始 - 这样它就不会被浮动图像重叠？左圆角需要可见。
PS：您也可以向我指出一个 javascript 解决方案，但我更喜欢用 css 解决这个问题。