我如何用css将文本拟合到图像中

Question

我有一张图片，我需要在其中显示一个表单，但是当我添加更多标签和文本时，它会变得混乱：

这是我的代码：

    .box { 
    width: 650px;
    padding-right: 15px; /* the gap on the right edge of the image (not content padding) */ 
    margin: 20px auto; /* use to position the box */
    z-index: 10;
    position: absolute;
    top: 100px;
    left: 230px;
}

.box_head { 
    background-position: top right;
    margin-right: -15px; /* pull the right image over on top of border */
    padding-right: 40px; /* right-image-gap + right-inside padding */
}

.box_head h2 {
    background-position: top left;
    margin: 0; /* reset main site styles*/ 
    border: 0; /* ditto */
    padding: 25px 0 15px 40px; /* padding-left = image gap + interior padding ... no padding-right */ 
    height: auto !important; height: 1%; /* IE Holly Hack */
}

.box_body { 
    background-position: bottom left; 
    margin-right: 25px; /* interior-padding right */ 
    padding: 15px 0 15px 40px; /* mirror .cssbox_head right/left */
}

Answer 1

我建议您使用图像编辑器，然后将图像切片到组件。

之后，将图像放在<img>标签中，然后在它们旁边输入控件。通过这种方式，使用CSS控制布局会更容易。