Question

我要在左侧添加背景图片的部分

这是到目前为止我所做的事情：

更新的链接：http://jsfiddle.net/Mwanitete/4f6xuh8b/39/

这是我想要拥有的东西。

.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: 3829px 3581px;
    /* background-position: right; */
    background-position: right;
}
.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;
}

.marketing-main-page-content-kontakty-formularz_quote{
    background-image: url('https://svgshare.com/i/8KX.svg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 100% 100%;
    position: relative;
    width: 937px;
    height: 713px;
    display: flex;
    justify-content: center;
    vertical-align: middle;
    margin-left: -432px;
    }
    
    .marketing-main-page-content-kontakty-formularz_quote P {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-family: Roboto;
    font-size: 70px;
    right: 80px;
    color: white;
}

 

<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>
        
        <div class="marketing-main-page-content-kontakty-formularz_quote">

我尝试使用背景尺寸播放，但是很遗憾，我无法使其达到预期的效果，

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

Answer 1

也许这更接近您想要的。我将背景尺寸更改为能反映窗口宽度的尺寸。

.marketing-main-page-content-FAQ {
    padding: 231px 0px;
    background-image: url(https://svgshare.com/i/8K7.svg);
    background-repeat: no-repeat;
    background-size: 150vw;
    background-position: right 0;
}

contains

我想到不使用下一个div剪切背景的最简单方法是添加更多的padding-bottom并使用-margin将其拉回。下一个背景可能不会达到您想要的确切位置，但是在自适应设计中，很难同步这两个背景。随意使用这两个值。

.marketing-main-page-content-FAQ {
    padding: 231px 0px 944px;
    background-image: url(https://svgshare.com/i/8K7.svg);
    background-repeat: no-repeat;
    background-size: 150vw;
    background-position: right 0;
    margin-bottom: -713px;
}

Demo

如何将背景图片浮动到左侧？

1 个答案: