首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >内容从背景中消失

内容从背景中消失
EN

Stack Overflow用户
提问于 2018-09-16 04:44:19
回答 2查看 56关注 0票数 0

我有一个包含内容的部分,我已经添加了一个背景,我希望内容是在背景里面,不幸的是,我不能得到我想要的。

以下是所期望的视觉效果

以下是我到目前为止所做的工作:http://jsfiddle.net/Mwanitete/8w36hrdk/

这是HTML

代码语言:javascript
复制
<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

代码语言:javascript
复制
.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;
}

我尝试了不同的组合,但我不能解决这个问题。

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

EN

回答 2

Stack Overflow用户

发布于 2018-09-16 04:58:16

我通常使用百分比或ems,而不是像素,使生活更容易。

还可以尝试在css文件中添加以下代码

代码语言:javascript
复制
body, html {
height:100%;
width : 100%;
max-height:100%;
max-width : 100%;
}
票数 0
EN

Stack Overflow用户

发布于 2018-09-17 04:26:07

基本上你只需要给下面的div一个宽度。例如:

代码语言:javascript
复制
.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;
    border: 1px solid red;
    width: 500px;  //set a width here
}

这将使您的所有内容保持在框内,而不会移出盒子。

我已经更新了小提琴:http://jsfiddle.net/8w36hrdk/13/

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/52348718

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档