如何在50%的区域CSS上设置背景颜色

Question

我想要一个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;
}

<div>some text</div>

因此,当您看到背景颜色填充所有div的宽度和高度时.这可能使背景只填充50%吗？

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

Answer 1

我们可以实现一个这样的效果线性渐变,background-size和background-position

• 背景如下:

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

  所有这些线性渐变确实为我们提供了可以像背景图像一样操纵的背景颜色.

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

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

的计算值减少了背景的恰好100像素的尺寸和中心时在宽度50像素周围的div透明空间.

完整的例子

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

div {
  background: linear-gradient(to bottom, grey 0, grey 100%) no-repeat;
  background-size: calc(100% - 100px) calc(100% - 100px); /* Reduce height of background by 100px and width by 100px*/  
  background-position: center;
  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 {
  float: left;
}

<div>some text</div>
<div class="no-gradient">I am the same size as the other div</div>