把图片分割成这样的切片。宽略大于黑色部分，高度也可以分得更细。
添加HTML
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Chapter 9 Project</title><style type="text/css"></style></head><body><div id="first"><img src="bg1.gif" alt="lyk" class="lyk" /><img src="bg2.gif" alt="lyk" class="lyk" /><img src="bg4.gif" alt="lyk" class="lyk" /><img src="bg6.gif" alt="lyk" class="lyk" /><img src="bg3.gif" alt="lyk" class="lyk" /><img src="bg5.gif" alt="lyk" class="lyk" /><img src="bg7.gif" alt="lyk" class="lyk" /><img src="bg.gif" alt="lyk" class="lyk" /><h2>Art. Passion. The Web.</h2><p>How often do you think of these words as going together? If you're like most people, the answer is "never."But here at Pretentious Web Studios, we aren't like most people. We think that your Web site should not only be a compelling work of art, but it should reflect your passion, whatever that may be. We'll do whatever it takes to make that happen. That's why every site we create is custom designed with all the features that you need to make your site a success. The way we see it, cookie cutters belong in the kitchen.</p><h3>Pushing the Envelope</h3><p>Lorem ipsum, dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis lerxst nostrud exerci tation ullamcorper suscipit itsa alla greeka te mea lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate dirk velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit pratt praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p><p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p></div></body></html>添加CSS
CSS
html {
}{margin: 0; padding: 0;}body {}{font: 11px Verdana, Arial, Helvetica, sans-serif; margin: 0; padding: 0;
background: #000;}div#first {}{margin: 50px; color: #fff; background: #999;}img.lyk{}{float: left; clear: left;}p,h2,h3 {}{padding: 5px 20px 5px 20px;}h2 {}{border-bottom: solid 2px #fff;}关键在于 float: left; clear: left; 浮动在左边，并且清除浮动，这样的话块级元素的图片就会到下一行去，而内联元素的文字不会。文字就会挨着图片形成弧线的排列。
图片的左侧为背景色，这样可以造成假象，而右侧比较好的做法是透明，这样的话改变div#first背景色是可以不用改变图片了，并且在添加一些边框效果的时候比较方便。