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 の異なるパターンを与えることができるはずです。

ジャンボトロン クラスをサムネイルのいずれかに設定すると、ページ全体が引き伸ばされます。

これは可能ですか？

4

1 に答える 1

3

widthaと aを設定するだけですheight：

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

また、必要に応じて を調整することも忘れないでくださいpadding。

于 2013-01-22T05:03:29.617 に答える