css positioning works but bloats page

[Roy]

I'd like to create a web page that highlights sections of text with different background colors. The sections can overlap. I tried span tags at first, but that broke down depending on how the sections overlapped. Combining CSS positioning with xmlns sounded like a promising solution to the problem.

What I've come up with gets the job done, but it involves creating a copy of the text for each background color (2 colors --> 2 copies, 3 colors --> 3 copies, N colors --> N copies). An example page is included below. Is there a more efficient way to do this?

Thanks,
Roy

<html xmlns:myns>
<style>
@media all
{
myns\:thetext { position:absolute; top:0; left:0;}
myns\:bg1 { background:rgb(80%,80%,80%); z-index:1;}
myns\:bg2 { background:rgb(0%,80%,80%); z-index:2;}
}
</style>
<head>
</head>

<body>
<!-- Since 2 colors, the same text appears twice, with the tags in different spots --> <myns:thetext> <myns:bg1>This sentence has two sections with</myns:bg1> nonwhite backgrounds. </myns:thetext> <myns:thetext> This sentence has two <myns:bg2>sections with nonwhite</myns:bg2> backgrounds. </myns:thetext> </body>

</html>