css多个图像具有响应的渐变问题

问题描述

这是我的预期输出：

这是我生成的宽度为 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;
    }

我在这里面临两个问题：

点状图案并非完全以所有尺寸开头（请参阅 767px）
如何通过向下的某个点限制梯度。（应该在点状图案开始的地方停止）目前应用于整个高度。

解决方法

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

.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 circles pattern */
    url("./../../images/small/tantum-dotts-house.png") content-box content-box;
   
}

css-backgrounds css-gradients