我有一张像这样的图像。我想把它放在我的网站上，但我不希望它成为一个图像。我只希望它的图像部分是图像，并且您在下面看到的所有其他图像/文本都应该使用 html/css “添加”到主背景图像中。但是我很难理解如何做到这一点！ :( 我已经阅读了 6 篇教程，只是不明白。
主背景图：
当我使用 HTML/CSS 向它添加图像和文本后，它应该是这样的。但这是我不知道该怎么做。我只是不明白如何将所有内容放在我想要的位置！：
请帮忙，非常感谢任何帮助。
谢谢
【问题讨论】：
您需要在包含元素上使用背景图片。下面是一个使用您的图像作为背景的简单示例：http://jsfiddle.net/q8QJv/1/
【讨论】：
<div id="background">。右边有一个css文件，里面有一个设置背景图片的规则。 #background {}
您可以创建一个div 并将其background-image CSS 属性设置为该图像。
您将需要做大量工作才能使其他所有内容在其中正确排列，但它应该是可管理的。
我建议您使用 ems 作为长度单位，而不是像素，以防用户缩放您的页面...它应该有助于在大多数正常比例下保持对齐。
【讨论】：
您可以完全避免在此处使用 CSS border-radius 使用您的图片。
使用border-radius 可以轻松完成三个角落。
第四个角落更棘手。 border-radius 足够灵活，您应该能够使用它实现您设计的效果，或者至少可以达到类似的效果。
类似于以下内容：
.mybox {
-moz-border-radius: 8px 8px 8px 20px;
border-radius: 8px 8px 8px 20px;
}
更复杂的形状也是可能的。然而，对于像这样奇怪的形状，要让border-radius 在各种浏览器之间保持一致可能会有点棘手。它显然也不会做你放在角落里的按钮。
出于这个原因，我建议使用简单的border-radius 样式以相同的方式使所有角都变圆，然后将单个图像分层放在左下角做你的特殊角落.
当然，你可以坚持使用现有的图像，在这种情况下，其他人已经提出了可行的解决方案，所以我不会在这里重复它们。但希望您会考虑使用border-radius 选项。
这是一个很好地概述了一些边框半径技巧（以及一些其他有趣的 CSS 内容）的页面：http://www.the-art-of-web.com/css/border-radius/
对这一切的一个大警告是border-radius 在 Internet Explorer 中不起作用。不过好消息是CSS3Pie 有一个很好的解决方法。
【讨论】：
.htc 文件。它会尝试在 每个 使用它的元素上获取 .htc 文件，因此如果您的 CSS3 设计风格非常重，在 IE 中的性能可能会受到阻碍。
您需要一些标记，例如：
<div id="container">
<header>
<h2>text title</h2>
<img src="top_right_image.png"/>
</header>
<p>Main body text</p>
<footer>
<a href="clickable location"><img src="clickable image" /></a>
</footer>
</div>
然后您可以使用以下方式设置样式：
“容器”div 的背景图像。 您可以绝对发送标题、右图、正文等的位置。
【讨论】：
这是我的看法：
<div class="boxWrap">
<div class="boxHead">
<h2>Some text here <img src="logo.png" /></h2>
</div>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<div class="clickable"><a href="#"><img src="triangleImg.png" /></a></div>
</div>
.boxWrap {
min-width: 50%;
background-color: #000;
padding: 0.5em;
}
.boxWrap .boxHead {
background-color: #fff;
border-radius: 1em 1em 0 0;
padding: 0.5em 0.75em;
}
.boxHead h2 {
font-size: 1.5em;
}
.boxHead img {
float: right;
}
.boxWrap p {
margin: 0;
padding: 0 0.5em;
background-color: #fff;
}
.boxWrap .clickable {
background-color: #fff;
margin: 0;
padding: 0;
overflow: hidden;
border-radius: 0 0 1em 0;
}
.boxWrap .clickable img {
height: 50px;
width: 50px;
margin: 0;
padding: 0;
float: left;
}
我没有在任何真实图像中替换徽标（在h2 元素中）或左下角。但这应该很容易适应您的需求，显然如果您需要任何帮助来调整它，或者需要解释我所做的事情（或为什么），请离开 cmets，我会尽我所能尽我所能提供帮助。
【讨论】：
看起来您可以拥有一个居中的容器 div，将 background-image 设置为指向您的背景图像，设置适当数量的 padding 并包含所有其他元素。它可能有一个relative position。对我来说，文本标题看起来像 h1。右上角的图像将是浮动到右侧的图像。您的段落将在p 内。可点击图像可以有一个绝对位置，left 和 bottom 设置为适当的数量。
类似这样的：
<div id="container">
<h1>text title</h1>
<img src="/someImage" alt="" />
<p>a paragraph</p>
<a href="/aLink">clickable button</a>
</div>
【讨论】：