Html 如何设置50%面积CSS的背景色

我想要一个div，在这个div里面必须有一个带颜色的字段。所以我想用div，比如200px，200px，设置背景色：灰色，大小为100px，从50px，50px开始

请查看以下代码片段：

div{
背景颜色：灰色；
背景尺寸：100px 100px；
背景位置：50px 50px；
最小宽度：200px！重要；
最小高度：200px！重要；
最大宽度：200px！重要；
最大高度：200px！重要；
填充：50px；
}

---

一些文本

您只需使用具有所需厚度的

边框

即可实现：

text两者都可以，并且只能用于图像，因此不能将它们仅用于颜色

我会将该div包装在另一个div中并执行以下操作：

div.wrapper {    
  height:200px;
  width:200px;
  padding:50px;
  background:red;
}
div.inner{
  background-color: gray;
  width: 100px;
  height: 100px;
}


如果这不是一个选项，你也可以使用一个图像来代替，并定位它。
其他答案提供了很好的解决方法。这是一个冷酷的事实：

不能为半个元素的内容区域设置背景色
背景色应用于元素内容区域。不能将背景色应用于元素内容区域的一半

解释如下：

内容区域是包含元素真实内容的区域。它通常具有背景、颜色或图像（按照该顺序，不透明图像隐藏背景颜色），并且位于内容边缘内部；其尺寸是内容宽度或内容框宽度，以及内容高度或内容框高度

元素的内容区域正好有一种背景色。颜色可能是透明的，也可能是继承的，而不是定义的，或者是完全覆盖的——但是，总有一种，而且只能有一种

浏览器开发人员工具中的检查元素将帮助您熟悉这一点

对于您要求创建的效果，有许多变通方法，包括嵌套元素、伪元素和厚边框。
我们可以使用、和来实现此效果


背景如下所示：

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

所有这些线性渐变给了我们一个背景颜色，可以像背景图像一样操纵

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

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



当中心宽度为50px时，将背景的大小精确减小100px，并将div周围的透明空间减小50px

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


div{
背景：线性梯度（至底部，灰色0，灰色100%），无重复；
背景大小：计算（100%-100px）计算（100%-100px）；/*将背景高度减少100px，宽度减少100px*/
背景位置：中心；
填充：80px；/*50px边框+30px额外填充*/
宽度：20vw；
高度：20vw；
最小宽度：200px；
最小高度：200px；
}
无梯度分区{
背景：灰色；
}
/*比如说*/
html，
身体{
身高：100%；
保证金：0；
}
身体{
背景：线性梯度（至底部，黑色0%，白色100%）；
}
div{
浮动：左；
}
一些文本
我与另一个div的大小相同
使用psuedoelement模拟所需象限中的颜色
 给你


div.container{
宽度：200px；
背景：透明；
边框：1px实心#A7A7；
填充：50px 0；
}
分区内容器{
背景颜色：灰色；
宽度：100px；
填充：25px0；
保证金：自动；
}

---一些文本---
我不希望红色区域有任何颜色，我希望红色区域是透明的，只有背景颜色在中心，然后使用边距而不是边框：是的，我知道这个解决方案，但我想使用一些背景属性，如果没有人以我希望的方式回答，我会将您的答案标记为接受答案。感谢您的帮助第三个解决方案：div中的div在2019年更新，因为浏览器现在要求
计算（100%-100px）
在
背景大小中两次，一次用于x轴和y轴。
background-size: calc(100% - 100px) calc(100% - 100px);
background-position: center;