css - css 多张带有渐变问题的图像，响应式

Question

这是我的预期输出：

这是我生成的输出，宽度为375px.

这里是767px：

这是我的CSS代码：

.content{
        width:100%;
        background-image: 
        url("./../../images/small/tantum-winter-home.jpg"),
        url("./../../images/small/tantum-dotts-house.png"),
        linear-gradient(90deg,#e8e6e6 50%, rgba(0,212,255,0) 20%);
        background-repeat: no-repeat, no-repeat;
        background-position: 65% 20%, right 56% bottom;
        height: 35rem;
    }

我在这里面临两个问题：

1. 虚线图案并非完全从所有尺寸开始（参见 767px）
2. 如何用向下的某个点限制渐变。（应该停在虚线图案开始的地方）目前在高度上应用。

Answer 1

这是一个更适合响应式的不同想法：

.box {
   height:300px;
   box-sizing:border-box;
   /* the padding will control the radial-gradient area */
   padding: 50px 50px 0 calc(100% - 200px);
   background:
    /* the image placed at right:0 and top:50px */
    url(https://picsum.photos/200/150) right 0 top 50px no-repeat,
    /* the main color having width:(100% - 100px) and height:(100% - 50px) */
    linear-gradient(#e8e6e6 0 0) 0 0/calc(100% - 100px) calc(100% - 50px) no-repeat,
    /* the circles pattern (2px radius inside a 8px*8px square) */
    radial-gradient(circle 2px,#757575 97%,transparent) 0 0/8px 8px content-box content-box;
   
}

<div class="box"></div>

您可以用您的 png 替换径向渐变，并具有以下内容：

.box {
   height:300px;
   box-sizing:border-box;
   /* the padding will control the radial-gradient area */
   padding: 50px 50px 0 calc(100% - 200px);
   background:
    /* the image placed at right:0 and top:50px */
    url(https://picsum.photos/200/150) right 0 top 50px no-repeat,
    /* the main color having width:(100% - 100px) and height:(100% - 50px) */
    linear-gradient(#e8e6e6 0 0) 0 0/calc(100% - 100px) calc(100% - 50px) no-repeat,
    /* the circles pattern */
    url("./../../images/small/tantum-dotts-house.png") content-box content-box;
   
}