css - 内容脱离背景

标签 css html

我有一个包含内容的部分,我为其添加了背景,我希望内容位于背景中,不幸的是我无法获得我想要的内容。

这是预期的可视化 enter image description here

这是我到目前为止所做的: http://jsfiddle.net/Mwanitete/8w36hrdk/

这是HTML

<div class="marketing-main-page-content-FAQ">
            <div class="marketing-main-page-content-FAQ_header">
                <h5>Faq</h5>
                <p>Lorem ipsum dolor sit amet, vidit mundi gubergren ne usu, porro evertitur vix et.
.</p>
            </div>
            <div class="marketing-main-page-content-FAQ_pytanie">
                <div class="marketing-main-page-content-FAQ_pytanie-card card-0 card">

                    <a class="pytania" data-toggle="collapse" href="#test-block0" aria-expanded="true" aria-controls="test-block0">
                        Demo1
                    </a>
                    <div id="test-block0" class="collapse">
                        <div class="card-block">
                            Po kliknięciu w pytanie rozwija się dropdown z odpowiedzią na pytanie, jak klikniemy na
                            inne to się zwija. Najlepiej, żeby były to max. 2 zdania.
                        </div>
                    </div>
                </div>

                <div class="marketing-main-page-content-FAQ_pytanie-card card-0 card">
                    <a class="pytania" data-toggle="collapse" href="#test-block1" aria-expanded="true" aria-controls="test-block2">
                         Demo1
                    </a>
                    <div id="test-block1" class="collapse">
                        <div class="card-block">
                            Po kliknięciu w pytanie rozwija się dropdown z odpowiedzią na pytanie, jak klikniemy na
                            inne to się zwija. Najlepiej, żeby były to max. 2 zdania.
                        </div>
                    </div>
                </div>
                <div class="marketing-main-page-content-FAQ_pytanie-card card-0 card">
                    <a class="pytania" data-toggle="collapse" href="#test-block2" aria-expanded="true" aria-controls="test-block">
                       Demo1
                    </a>
                    <div id="test-block2" class="collapse">
                        <div class="card-block">
                            Po kliknięciu w pytanie rozwija się dropdown z odpowiedzią na pytanie, jak klikniemy na
                            inne to się zwija. Najlepiej, żeby były to max. 2 zdania.
                        </div>
                    </div>
                </div>
                <div class="marketing-main-page-content-FAQ_pytanie-card card-0 card">
                    <a class="pytania" data-toggle="collapse" href="#test-block3" aria-expanded="true" aria-controls="test-block">
                      Demo1
                    </a>
                    <div id="test-block3" class="collapse">
                        <div class="card-block">
                            Po kliknięciu w pytanie rozwija się dropdown z odpowiedzią na pytanie, jak klikniemy na
                            inne to się zwija. Najlepiej, żeby były to max. 2 zdania.
                        </div>
                    </div>
                </div>
                <div class="marketing-main-page-content-FAQ_pytanie-card card-0 card">
                    <a class="pytania" data-toggle="collapse" href="#test-block4" aria-expanded="true" aria-controls="test-block">
                        Demo1
                    </a>
                    <div id="test-block4" class="collapse">
                        <div class="card-block">
                            Po kliknięciu w pytanie rozwija się dropdown z odpowiedzią na pytanie, jak klikniemy na
                            inne to się zwija. Najlepiej, żeby były to max. 2 zdania.
                        </div>
                    </div>
                </div>
                <div class="marketing-main-page-content-FAQ_pytanie-card card-0 card">
                    <a class="pytania" data-toggle="collapse" href="#test-block5" aria-expanded="true" aria-controls="test-block">
                       Demo1
                    </a>
                    <div id="test-block5" class="collapse">
                        <div class="card-block">
                            Po kliknięciu w pytanie rozwija się dropdown z odpowiedzią na pytanie, jak klikniemy na
                            inne to się zwija. Najlepiej, żeby były to max. 2 zdania.
                        </div>
                    </div>
                </div>

            </div>
        </div>

这是CSS

.marketing-main-page-content-FAQ {
    /* margin-top: 80px; */
    padding: 231px 0px;
    background-image: url(https://svgshare.com/i/8K7.svg);
    background-repeat: no-repeat;
    background-size: 150vw;
    background-position: right 0;
}
.marketing-main-page-content-FAQ_pytanie {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.marketing-main-page-content-FAQ_pytanie-card {
    width: 536px;
    height: 132px;
    font-family: Roboto;
    margin-top: 20px;
    font-size: 25px;
    text-align: center;
    vertical-align: middle;
    display: table-cell;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 41px;
}
.marketing-main-page-content-FAQ_pytanie {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.marketing-main-page-content-FAQ_header p {
    width: 451px;
    height: 184px;
    font-size: 35px;
    font-family: Roboto;
    color: #707070;
}
.marketing-main-page-content-FAQ_header {
    margin-left: 40px;
}

我尝试了不同的组合,但我无法解决问题,

我需要做什么才能得到我想要的?

最佳答案

我通常使用百分比或 em 而不是像素,让生活更轻松

也尝试在您的 css 文件中添加以下内容

body, html {
height:100%;
width : 100%;
max-height:100%;
max-width : 100%;
}

关于css - 内容脱离背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52348718/

相关文章:

html - CSS 动画序列

html - 知道textarea中使用的字体吗?

android - css 媒体查询 - 如何仅针对 ios 或 android 设备?

javascript - 更改元素大小 jQuery

css - Bootstrap 响应式导航栏仅在手机模式下折叠(无平板电脑模式)

css - 网站的动态配色方案转换器

html - CSS 最小高度不起作用

javascript - javascript中如何将局部变量从一个函数传递到另一个函数

html - 复制清除 :both element

javascript - 使用 ng-repeat 为特定记录动态数据的按钮切换