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

Question

我想要一个 div，这个 div 里面必须有一个带有颜色的字段。所以我想要 div，例如 200px x 200px 并设置背景颜色:灰色，其大小为 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

我们可以用 linear gradient 来实现这个效果, 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;
  

calc将背景尺寸缩小 100 像素，居中时 div 周围的透明空间宽度为 50 像素。

完整示例

第二个 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>