Question

我希望在我的网站设计上放置一个比框大的图像（查看图像链接），这是我网站设计的一部分。我想用css方法。我现在使用dreaweaver，我想编码这些图像，请帮助我。

白色bg区域的大小为737×323，（w×h）黄色区域的大小为275×323（宽×高），水果图片的大小为690×180。（W×H）

Image link

Answer 1

这是应该给你一个起点的东西。主要技巧是使用position:absolute。我建议你read about what that means。基本上，它允许您指定页面元素的精确像素坐标。

请注意，您在问题中提供的尺寸有点奇怪。例如，水果图片为690x180。但是当我看到图像时，似乎水果基本上是方形的。也许你的形象有很多透明的空间？没有看到图像本身就不清楚了。

此外，在真实网站上，您可能需要在黄色框内为文本本身设置另一个嵌套<div>。

无论如何，这是一个只使用彩色矩形的例子，你的图像显示的近似排列：

<html>
<head>
<style type='text/css'>
.back {
    position:absolute;
    background-color:gray;
    width:700px;
    height:400px;
    left:0;
    top:0;
    text-align:right; /* just to make the text readable in this example */
}

.text {
    position:absolute;
    background-color:yellow;
    width:600px;
    height:300px;
    left:50px;
    top:50px;
    text-align:right; /* just to make the text readable in this example */
}

.fruit {
    position:absolute;
    background-color:red;
    width:300px;
    height:380px;
    left:10;
    top:10;
}
</style>
</head>
<body>
    <div class='back'>the background</div>
    <div class='text'>the yellow area</div>
    <div class='fruit'>put the fruit image here</div>
</body>
</html>

当然，还有很多其他方法可以做，具体取决于你如何剪切图像。

如何使用css编码比div更大的图像

1 个答案: