html设置背景颜色位置,javascript – 如何在50％的区域CSS上设置背景颜色

我想要一个div,在这个div里面必须是一个有一些颜色的字段.所以我想要div例如200px x 200px并设置背景颜色：灰色,其大小ll为100px x 100px,并从位置50px 50px开始.

请使用以下代码查看此代码段：

div{

background-color: gray;

background-size: 100px 100px;

background-position: 50px 50px;

min-width:200px!important;

min-height:200px!important;

max-width:200px!important;

max-height:200px!important;

padding:50px;

}

some text

因此,当您看到背景颜色填充所有div的宽度和高度时.

这可能使背景只填充50％吗？

注意：红色区域应该是透明的.

解决方法:

>背景如下：

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

标签：javascript,css,html

来源： https://codeday.me/bug/20190717/1487683.html