java 设置区域颜色_如何在50％的区域CSS上设置背景颜色

背景如下：

background: linear-gradient(to bottom, grey 0%, grey 100%) no-repeat;

所有这些线性渐变确实给我们一个背景颜色，可以像背景图像一样进行操作 .

渐变被视为图像，可以居中并重新调整大小

background-size: calc(100% - 100px);

background-position: center;

calc将背景的大小精确缩小100px，居中的div周围的透明空间宽度为50px .

完整的例子

第二个div显示div的真实大小， 20vw 宽度和高度显示div如何重新调整大小 .

div {

background: linear-gradient(to bottom, grey 0%, grey 100%) no-repeat;

background-position: center;

background-size: calc(100% - 100px); /* 100px is the total for each axis (50px + 50px)*/

padding: 80px; /* 50px border + 30px additional padding */

width: 20vw;

height: 20vw;

min-width: 200px;

min-height: 200px;

}

div.no-gradient {

background: grey;

}

/*For example*/

html,

body {

height: 100%;

margin: 0;

}

body {

background: linear-gradient(to bottom, black 0%, white 100%);

}

div {

display: inline-block;

}

some text

I am the same size as the other div