Question

我看到现代网站将颜色渐变+图案作为页面背景。您可以查看twitter引导网站here的'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类设置为任何缩略图时，它会延伸整个页面。

这可能吗？

Answer 1

您只需要设置width和height：

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

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

如何将图像模式和颜色渐变设置为背景

1 个答案: