首页 文章

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

提问于
浏览 次
3

我想要一个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％吗？
enter image description here

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

javascript html css

6 回答

  • 0

    我们可以用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>
    回复于
  • 6

    其他答案提供了很好的解决方法 . 这是冷酷的事实：

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

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

    Mozilla解释了这个：

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

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

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

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

    回复于
  • 2

    您只需使用具有所需厚度的 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;
}
    回复于
  • 1

    干得好..

    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>
    回复于
  • 0

    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

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

    回复于
  • 1

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

    回复于

相关问题