Question

我正在尝试在我正在处理的网站上添加与此设计非常相似的内容：

http://www.templatemonster.com/demo/54794.html

请注意，该网站的bg中的中间绿色块是如何对角的，但仍保持响应，同时在它们前面还有元素？

如何才能完成这样的事情？它是在css中设置为全宽的图像吗？如果是这样，我如何在元素前面添加内容？

这是一个截图，以防链接过期或我不清楚我在说什么元素：

Answer 1

使用背景图片！

.bg-image {
    position: relative;
}
.bg-image img {
    display: block;
    width: 100%;
    max-width: 1200px; /* corresponds to max height of 450px */
    margin: 0 auto;
}
.bg-image h1 {
    position: absolute;
    text-align: center;
    bottom: 0;
    left: 0;
    right: 0;
    color: white;
}
.nav, .main {
    background-color: #f6f6f6;
    text-align: center;
}

<div class="container">
    <div class="row-fluid">
        <div class="span12">
            <div class="nav">nav area</div>
            <div class="bg-image">
                <img src="http://unplugged.ee/wp-content/uploads/2013/03/frank2.jpg">
                 <h1>This is centered text.</h1>
            </div>
            <div class="main">main area</div>
        </div>
    </div>
</div>

See it in a new window (change browser size)

Answer 2

也许您可以像这样使用CSS转换属性：

<html>
   <div class="rotate-wrapper">
    <div class="my-rotated-div">
          <div class="rotated-div-content">
          My Content
          </div>
    </div>
   </div>
</html>

CSS：

my-rotated-div {
     -ms-transform: rotate(45deg); /* IE 9 */
     -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
     transform: rotate(45deg);
}
rotated-div-content {
    -ms-transform: rotate(-45deg); /* IE 9 */
    -webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */
    transform: rotate(-45deg);
}

然后你只需将引导样式应用到rotate-wrapper，你就应该好了。

如果您只想要旋转块的外观，您可以使用背景图像，但是您必须微观管理背景位置以匹配您想要的。

如何在响应式设计中添加对角线块？

2 个答案: