如何在CSS中将背景颜色设置为50%的区域

Question

我想要一个 div，里面有一个带颜色的区域。比如说我想要一个大小为 200px x 200px 的 div，设置背景颜色为灰色，并且这个 div 里有一个 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%？

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

- Maciej Wojcik

Answer 1

我们可以通过使用线性渐变, background-size和background-position来实现这种效果。

• The background looks like this:

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

  All this linear-gradient does is give us a background colour that can be manipulated like a background image.

• The gradient is treated like an image and can be centered and re-sized:

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

计算器可以将背景大小减小100像素，当居中时，透明空间周围的宽度为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>

- misterManSam

---

由于浏览器现在要求在background-size中两次使用calc(100% - 100px)，分别用于x轴和y轴，因此此内容已于2019年更新。 - misterManSam

Answer 2

其他答案已经提供了很好的解决方法。以下是冷酷无情的真相：

你不能为元素的一半内容区域设置背景颜色。

背景颜色应用于元素的内容区域。你不能将背景颜色应用于元素内容区域的一半。

Mozilla解释了这一点：

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

元素的内容区域只有一个背景颜色。颜色可以是透明的，并且可以继承而不是定义，或者完全被覆盖 - 但仍然只有一个，且只能有一个。

在浏览器开发工具中检查元素将帮助您熟悉此内容区域。

有许多解决方案可创建所需效果，包括嵌套元素、伪元素和粗边框。

- Tim Grant

Answer 3

这里是您需要的内容。

div.container {    
  width:200px;
  background:transparent;
  border: 1px solid #a7a7a7;
  padding:50px 0;
}
div.inner-container{
  background-color:gray;
  width: 100px;
  padding:25px 0;
  margin:auto;
}

<div class="container">
  <div class="inner-container">
   ---some text---
  </div>
</div>

- Viira

Answer 4

您可以通过设置所需的边框厚度来轻松实现：

border

http://codepen.io/anon/pen/XjpbNJ

<div class="x">text</<div>

.x {
  width: 200px;
  height: 200px;
  background: grey;
  border: 100px solid red;
  text-align: center;
}

- Johannes

---

我不想在红色区域有任何颜色，我希望该红色区域是透明的，只有背景颜色位于中心。 - Maciej Wojcik

然后使用边距而不是边框：http://codepen.io/anon/pen/QKdbVR - Johannes

是的，我知道这个解决方案，但我想使用一些背景属性，如果没有人按照我希望的方式回答，我会将您的答案标记为接受的答案。谢谢帮助。 - Maciej Wojcik

第三种解决方案：一个 div 嵌套在另一个 div 中。 - Johannes

Answer 5

使用伪元素来模拟所需象限的着色。

- probablyup

Answer 6

background-size和background-position都只能用于图像，因此您不能仅使用它们来设置颜色。

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

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

JSFiddle

如果这不是一个选项，您也可以使用图像，并将其定位。

- Hanna