列的背景图像转到屏幕末尾

Question

我制作了一个 Wordpress 块，我正在尝试获取图像（背景图像）来打破容器并延伸到屏幕的末端。我怎样才能实现这个目标？

这是基本娱乐的小提琴：https://jsfiddle.net/q5vtbokx/18/

<div class="container">
    <div class="row">
        <div class="col border"
            style="background: url('https://plus.unsplash.com/premium_photo-1694825173871-7b5df4d57ba5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2310&q=80') no-repeat center/ cover; min-height: 460px;">
        </div>
        <div class='col'>
            <h2 class='copyimage__title'>My Title</h2>
            <div class=" body">This is the copy</div>
            <div class="align-items-center">
                <a href=" #" class="btn btn-primary">
                  Button
                </a>
                <?php endif; ?>
            </div>
        </div>
    </div>
</div>

<style>
.container {
  max-width:80%;
  margin: auto auto;
}

.row {
  display: flex;
  flex-direction: row-reverse;
}

.col {
  flex-basis: 50%;
}

.border {
  border-bottom-left-radius: 50%;
}

.btn {
  padding: 5px 10px;
  background: blue;
  color: white;
}

.body {
  margin-bottom: 15px;
}
</style>

Answer 1

 .container {
            max-width: 80%;
            margin: auto auto;
        }

        .border {
            border-bottom-left-radius: 50%;
            max-width: 280px;
            width: 100%;
            height: 360px;
            position: absolute;
            right: 0;
            top: 0;
            background-repeat: no-repeat;
        }

        .btn {
            padding: 5px 10px;
            background: blue;
            color: white;
        }

        .body {
            margin-bottom: 15px;
        }

<div class="container">
        <div class="row">
            <div class="col-6">
                <h2 class='copyimage__title'>My Title</h2>
                <div class=" body">This is the copy</div>
                <div class="align-items-center">
                    <a href=" #" class="btn btn-primary">
                        Button
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="border"
        style="background: url('https://plus.unsplash.com/premium_photo-1694825173871-7b5df4d57ba5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2310&q=80') no-repeat center/ cover;">
    </div>

使用下面的代码。 所以你会看到容器外面的背景图像。

在此输入代码