1

我看到现代网站将颜色渐变+图案作为页面背景。您可以在此处查看twitter 引导站点的“jumbotron”类 。

.jumbotron {
    position: relative;
    padding: 40px 0;
    color: #fff;
    text-align: center;
    text-shadow: 0 1px 3px rgba(0,0,0,.4), 0 0 30px rgba(0,0,0,.075);
    background: #020031;
    background: -moz-linear-gradient(45deg, #020031 0%, #6d3353 100%);
    background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#020031), color-stop(100%,#6d3353));
    background: -webkit-linear-gradient(45deg, #020031 0%,#6d3353 100%);
    background: -o-linear-gradient(45deg, #020031 0%,#6d3353 100%);
    background: -ms-linear-gradient(45deg, #020031 0%,#6d3353 100%);
    background: linear-gradient(45deg, #020031 0%,#6d3353 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#020031', endColorstr='#6d3353',GradientType=1 );
    -webkit-box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2);
    -moz-box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2);
    box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2);
}

.jumbotron::after {
    content: '';
    display: block;
    position: relative; /* changed by me */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: url(../img/bs-docs-masthead-pattern.png) repeat center center;
    opacity: .4;
}

我需要的是创建，比如上面的 10 个类，每个类都指向不同的图像模式。我应该能够使用这些 CSS 类为画廊中的每个缩略图提供 10 种不同的模式。

当我将 jumbotron 类设置为任何缩略图时，它会拉伸整个页面。

这可能吗？

4

1 回答 1

3

您只需要设置 awidth和 a height：

.jumbotron {
    width: 100px;
    height: 100px;
    /* the rest of your CSS properties */
}

另外，不要忘记padding根据需要进行调整。

于 2013-01-22T05:03:29.617 回答