html背景多重渐变,html – 多个背景图像,渐变和图像,匹配图像比例

渐变不会缩放,因为容器元素的尺寸决定了渐变的大小.因此,无论页面是否调整大小,元素(反过来,渐变)都是750px高. (请注意,您有两个最小高度设置,因此后者将覆盖前者).您可以找到有关梯度图像

in my answer here的大小计算的更多信息.

现在看一下图像的情况,即使你已经将背景大小设置为包含(这也是渐变的默认大小),图像具有固有的宽高比,因此它们会以这样的方式自动缩放以使其高度宽度可以放在背景定位区域内,同时保持其纵横比.因此,随着元素宽度的变化(由于容器上的50％宽度设置而发生),图像的高度也会发生变化以保持比率.

因此,简而言之,您当前的设置将达不到您想要的效果,因为(a)渐变不会在高度上缩放,因为它没有固有的宽高比(据我所知,没有办法设置一个) (b)图像会缩放.

在不保持纵横比的情况下进行图像缩放可能不是理想的情况,即使分配了背景大小,也不可能以相同的方式缩放渐变(因为它不会缩放并以/为单位呈现为固定大小)没有重复).

在我看来,最好的解决方法是分配容器的尺寸,使其始终与它将要保持的图像尺寸成比例.例如,在下面的片段中,我使用了500px宽x 750px高的图像,因此我将容器的高度和宽度分别指定为100vh和150vh.这意味着当视口的高度发生变化时,容器的高度和宽度都会发生变化.这将意味着即使在缩放图像时,其纵横比与容器匹配,因此将占据完整的可用空间.

.row {

display: block;

width: 100vh;

min-height: 150vh;

background: -webkit-radial-gradient(50% 50%,url("http://lorempixel.com/500/750/nature/1");

background: radial-gradient(circle farthest-side at 50% 50%,url("http://lorempixel.com/500/750/nature/1");

background-blend-mode: multiply;

background-size: contain;

background-position: 0 0;

background-repeat: no-repeat;

}