Question

我正在尝试将一个白色的圆形矩形作为我网站的一部分。我用CSS尝试过这个，但我无法将圆形矩形拉伸或缩小到div的大小。

我的另一个尝试是使用img元素。我现在可以根据div BUT 中的文本数量来动态拉伸我的图像，现在我无法在其上放置任何文字。

你知道我如何在第2列的背景中显示文字吗？

<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
    <!--
        body { background-color: red; }
        .col1 { width: 20%; float: left; background-color: blue; }
        .col2 { width: 60%; float: left; }
        .col3 { width: 20%; float: left; background-color: yellow; }

        #content { z-index: 10; }
        #bk      { z-index: 0; top: 0px; left: 0px; }
    -->
    </style>
</head>

<body>

    <div class="col1">
        abvdvf
    </div>

    <div class="col2">
        <div id="content">
            kjfdjkf
        </div>

        <img id="bk" src="i.png" width="100%" height="100%" /> <!-- Correctly resizes my picture but now I cant place any text over the pic -->
    </div>

    <div class="col3">
        abvdvf
    </div>

</body>

</html>

Answer 1

尝试将此作为#content CSS：

#content { 
    background: white; 
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    height: 100%;
    padding: 15px 0;
    width: 100%;
}

该技术使用名为border-radius的CSS3规则。你应该调查一下。此外，您通常不需要设置z-index。

Answer 2

通常的技术是为每个圆角设置四个图像，并使用CSS将它们放在框的边缘（您可能需要额外的虚拟div来使其工作。）浏览器拉伸img是丑陋的，至少可以说。

试图在图像上显示文本

2 个答案: