在视口中调整图像

Question

我想将背景图像设置为50vh，并在底部显示此曲线。 但是，当我这样做时，它会从底部裁剪图像，并且曲线丢失。 我如何处理即使将曲线设置为50vh后曲线仍可以保留？

.background{
    background-image: url("https://i.stack.imgur.com/r45nE.png");
    background-repeat: no-repeat;
    height: 50vh;
    /*height: 916px;*/ /*this is the height of the image*/
}

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <header>
        <div class="container-fluid d-flex justify-content-center background">

        </div>
    </header>

Answer 1

您还必须使用background-size和background-position属性：

.background{
    background-image: url("https://i.stack.imgur.com/r45nE.png");
    background-repeat: no-repeat;
    background-size: cover;    
    background-position: 0% 100%;
    height: 50vh;
    /*height: 916px;*/ /*this is the height of the image*/
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <header>
        <div class="container-fluid d-flex justify-content-center background">

        </div>
    </header>

Answer 2

您可以像这样添加背景位置和大小：

.background{
    background-image: url("https://i.stack.imgur.com/r45nE.png");
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100%;
    height: 50vh;
    /*height: 916px;*/ /*this is the height of the image*/
}

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <header>
        <div class="container-fluid d-flex justify-content-center background">

        </div>
    </header>

Answer 3

当您使用background作为图像时，但您仅在观看其上半部分。您需要在查看端口中移动背景。

background-position: bottom;
background-size: cover;

位置将从底部显示图像，背景尺寸将覆盖视口中的图像。

Answer 4

您可以根据需要进行编辑。此javascript函数将完成您所需的任务

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.bezierCurveTo(20, 100, 200, 100, 200, 20);
ctx.stroke();

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">