Question

我有一个带有巨型标题页的页面。该页面是-http://www.mzungu.co.il/article.php?id=10

巨无霸的大小是40vmax：

.jumbotron {
    background-image:url('images/<?php echo $article_cover ?>');
    background:repeat:no-repeat;
    background-size: 100%;
    height: 35vmax;
    background-position:center center;
    color:#fff;
    text-shadow:2px 2px 4px black;
}

到目前为止我尝试过的代码是：

.jumbotron h1,
.jumbotron .h1 {
    position:relative; top 30vmax;
}

具有许多不同的位置变化（固定，绝对等），并带有“页边距”。找不到适用于PC和移动视图的内容。

我还想为文本部分创建背景，例如this pic

Answer 1

这也许可以帮助您。

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_hero_image

，对于文本背景，您可以这样操作。

.h1 {
    margin: 0 auto;
    width: 100px;

    h1 {
        padding: 6px;
        display: block;
        border-radius: 30px;
        background: rgba(192,192,192,.7);
        box-sizing: border-box;
        font-size: 22px;
        line-height: 1.8;
        text-align: center;
        text-decoration: none;
        color: #fff;
        transition: all 1s ease-out;
        position: relative;
    }
}

在Bootstrap的巨型机中放置响应文本

1 个答案: