Question

我的图像看起来像这样。我想把它放在我的网站上，但我不想让它成为一个图像。我只希望它的图像部分是一个图像，下面看到的所有其他图像/文本应该使用html / css“添加”到主背景图像上。但我很难理解如何做到这一点！ :(我已经阅读了6个教程，但是没有得到它。

主要BG图像：

alt text

一旦我使用HTML / CSS添加图像和文本，它就应该是什么样子了。但这是我无法弄清楚该怎么做的。我只是不明白如何把它放在我想要的地方！：

alt text

请帮助，非常感谢任何帮助。

谢谢

Answer 1

您可以创建div并将其background-image CSS属性设置为该图片。

你需要做一大堆工作才能使其他所有内容正确排列，但它应该是可管理的。

我建议您使用em s作为长度单位，而不是像素，以防用户缩放您的网页...它应该有助于保持最常规范围内的排列。

Answer 2

您需要在包含元素上使用背景图像。以下是使用图片作为背景的简单示例：http://jsfiddle.net/q8QJv/1/

Answer 3

您可以使用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/

一个 big 警告所有这些是border-radius在Internet Explorer中不起作用。不过好消息是，CSS3Pie的形式有一个很好的解决方法。

Answer 4

你需要一些标记，如：

<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的背景图片。您可以绝对发送标题，右图像，正文等的位置。

Answer 5

看起来你可以有一个居中的容器div，设置background-image指向你的bg图像，设置适当的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>

Fiddle demo with css applied

Answer 6

这是我的看法：

HTML：

<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>

CSS：

.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;
}

JS Fiddle demo

我没有在任何真实图像中替换徽标（在h2元素中）或左下角。但这应该很容易适应您的需求，显然如果您需要任何帮助来适应这一点，或者需要解释我已经做过的事情（或者为什么），留下评论，我会尽我所能尽我所能。

需要帮助HTML / CSS / jQuery

6 个答案:

HTML：

CSS：