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

Question

我想要一个div，在这个div里面必须是一个有颜色的字段。所以我想要div例如200px x 200px并设置背景颜色：灰色，其尺寸为100px x 100px，从50px 50px开始。

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

＆＃13;

＆＃13;

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;
}

＆＃13;

<div>some text</div>

＆＃13;

＆＃13;

＆＃13;

因此，您看到背景颜色填充了所有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);
  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;
}

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

Answer 2

其他答案提供了良好的解决方法。这是一个冷酷的事实：

您无法为半个元素的内容区域设置背景颜色

背景颜色适用于元素内容区域。您无法将背景颜色应用于元素内容区域的一半。

Mozilla解释了这一点：

  

内容区域是包含元素的实际内容的区域。它通常具有背景，颜色或图像（按此顺序，隐藏背景颜色的不透明图像）并位于内容边缘内;它的尺寸是内容宽度，内容框宽度，内容高度或内容框高度。

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

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

您要创建的效果有许多变通方法，包括嵌套元素，伪元素和粗边框。

Answer 3

您只需使用具有所需厚度的border即可实现此目的：

here

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

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

Answer 4

你在这里..

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>

Answer 5

background-size和background-position都只能用于图片，因此您无法仅使用颜色。

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

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

JSFiddle

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

Answer 6

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