CSS 我可以只为填充添加背景颜色吗？

Question

提问by Pavan Nadig

I have a header box including border and padding and background color for that box, can I change the background color only for the padded region after the border and then the same background color for the rest of the width (i.e. grey in the given code)?

我有一个标题框，包括该框的边框和填充以及背景颜色，我可以仅更改边框后填充区域的背景颜色，然后更改其余宽度的相同背景颜色（即给定代码中的灰色） ?

Just a pinch of the code where I want the padded background color:

只需一小撮我想要填充背景颜色的代码：

nav {
    margin:0px auto;
    width:100%;
    height:50px;
    background-color:grey;
    float:left;
    padding:10px;
    border:2px solid red;
}

Answer 1

采纳答案by gotohales

Another option with pure CSS would be something like this:

纯 CSS 的另一个选择是这样的：

nav {
    margin: 0px auto;
    width: 100%;
    height: 50px;
    background-color: white;
    float: left;
    padding: 10px;
    border: 2px solid red;
    position: relative;
    z-index: 10;
}

nav:after {
    background-color: grey;
    content: '';
    display: block;
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: -1;
}

Demo here

演示在这里

Answer 2

回答by Muhammad Umer

I am sorry everyone that this is the solution the true one where you dont have to actually set the padding.

对不起大家，这是真正的解决方案，您不必实际设置填充。

http://jsfiddle.net/techsin/TyXRY/1/

What i have done...

我做了什么...

Applied two gradients on background with both having one start and end color. Instead of using solid color. Reason being that you can't have two solid colors for one background.
Then applied different background-clip property to each.
thus making one color extend to content box and other to border, revealing the padding.

在背景上应用两个渐变，两者都有一种开始和结束颜色。而不是使用纯色。原因是一个背景不能有两种纯色。
然后对每个应用不同的背景剪辑属性。
从而使一种颜色扩展到内容框，另一种颜色扩展到边框，显示填充。

Clever if i say so to myself.

如果我对自己这么说，那就太聪明了。

div {
    padding: 35px;
    background-image:
      linear-gradient(to bottom,
        rgba(240, 255, 40, 1) 0%,
        rgba(240, 255, 40, 1) 100%),
      linear-gradient(to bottom,
        rgba(240, 40, 40, 1) 0%,
        rgba(240, 40, 40, 1) 100%);
    background-clip: content-box, padding-box;
}

Answer 3

回答by Danield

Use the `background-clip`and `box-shadow`properties.

使用`background-clip`和`box-shadow`属性。

1) Set background-clip: content-box- this restricts the background only to the content itself (instead of covering both the padding and border)

1) 设置background-clip: content-box- 这将背景仅限于内容本身（而不是覆盖填充和边框）

2) Add an inner box-shadowwith the spread radius set to the same value as the padding.

2）添加一个内部box-shadow，其传播半径设置为与填充相同的值。

So say the padding is 10px - set box-shadow: inset 0 0 0 10px lightGreen- which will make only the padding area light green.

所以说填充是 10px - set box-shadow: inset 0 0 0 10px lightGreen- 这只会使填充区域变成浅绿色。

Codepen demo

代码笔演示

nav {
  width: 80%;
  height: 50px;
  background-color: gray;
  float: left;
  padding: 10px; /* 10px padding */
  border: 2px solid red;
  background-clip: content-box; /* <---- */
  box-shadow: inset 0 0 0 10px lightGreen; /* <-- 10px spread radius */
}
ul {
  list-style: none;
}
li {
  display: inline-block;
}

<h2>The light green background color shows the padding of the element</h2>
<nav>
  <ul>
    <li><a href="index.html">Home</a>
    </li>
    <li><a href="/about/">About</a>
    </li>
    <li><a href="/blog/">Blog</a>
    </li>
  </ul>
</nav>

For a thorough tutorial covering this technique see this great css-tricks post

有关涵盖此技术的详尽教程，请参阅此出色的 css-tricks 帖子

Answer 4

回答by dave

You can use background-gradients for that effect. For your example just add the following lines (it is just so much code because you have to use vendor-prefixes):

您可以使用背景渐变来实现该效果。对于您的示例，只需添加以下几行（代码太多，因为您必须使用供应商前缀）：

background-image: 
    -moz-linear-gradient(top, #000 10px, transparent 10px),
    -moz-linear-gradient(bottom, #000 10px, transparent 10px),
    -moz-linear-gradient(left, #000 10px, transparent 10px),
    -moz-linear-gradient(right, #000 10px, transparent 10px);
background-image: 
    -o-linear-gradient(top, #000 10px, transparent 10px),
    -o-linear-gradient(bottom, #000 10px, transparent 10px),
    -o-linear-gradient(left, #000 10px, transparent 10px),
    -o-linear-gradient(right, #000 10px, transparent 10px);
background-image: 
    -webkit-linear-gradient(top, #000 10px, transparent 10px),
    -webkit-linear-gradient(bottom, #000 10px, transparent 10px),
    -webkit-linear-gradient(left, #000 10px, transparent 10px),
    -webkit-linear-gradient(right, #000 10px, transparent 10px);
background-image: 
    linear-gradient(top, #000 10px, transparent 10px),
    linear-gradient(bottom, #000 10px, transparent 10px),
    linear-gradient(left, #000 10px, transparent 10px),
    linear-gradient(right, #000 10px, transparent 10px);

No need for unecessary markup.

不需要不必要的标记。

If you just want to have a double border you could use outline and border instead of border and padding.

如果你只想有一个双边框，你可以使用轮廓和边框而不是边框和填充。

While you could also use pseudo-elements to achieve the desired effect, I would advise against it. Pseudo-elements are a very mighty tool CSS provides, if you "waste" them on stuff like this, you are probably gonna miss them somewhere else.

虽然你也可以使用伪元素来达到预期的效果，但我建议不要这样做。伪元素是 CSS 提供的一个非常强大的工具，如果你把它们“浪费”在这样的东西上，你可能会在其他地方错过它们。

I only use pseudo-elements if there is no other way. Not because they are bad, quite the opposite, because I don't want to waste my Joker.

如果没有其他方法，我只使用伪元素。不是因为他们不好，恰恰相反，因为我不想浪费我的小丑。

Answer 5

回答by iKamy

the answers said all the possible solutions

答案说了所有可能的解决方案

I have another one with BOX-SHADOW

我还有一个带 BOX-SHADOW 的

here it is JSFIDDLE

这是JSFIDDLE

and the code

和代码

nav {
    margin:0px auto;
    width:100%;
    height:50px;
    background-color:grey;
    float:left;
    padding:10px;
    border:2px solid red;
    box-shadow: 0 0 0 10px blue inset;
}

it also support in IE9, so It's better than gradient solution, add proper prefixes for more support

它也支持IE9，所以它比梯度解决方案更好，添加适当的前缀以获得更多支持

IE8 dont support it, what a shame !

IE8 不支持，太可惜了！

Answer 6

回答by Jan Han?i?

You can't set colour of the padding.

您无法设置填充的颜色。

You will have to create a wrapper element with the desired background colour. Add border to this element and set it's padding.

您必须创建一个具有所需背景颜色的包装元素。向这个元素添加边框并设置它的填充。

Look here for an example: http://jsbin.com/abanek/1/edit

在此处查看示例：http: //jsbin.com/abanek/1/edit

Answer 7

回答by Simon

This would be a proper CSS solution which works for IE8/9 as well (IE8 with html5shiv ofcourse): codepen

这将是一个适用于 IE8/9 的正确 CSS 解决方案（当然，IE8 带有 html5shiv）：codepen

nav {
  margin:0px auto;
  height:50px;
  background-color:gray;
  padding:10px;
  border:2px solid red;
  position: relative;
  color: white;
  z-index: 1;
}

nav:after {
  content: '';
  background: black;
  display: block;
  position: absolute;
  margin: 10px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
}

Answer 8

回答by MildlySerious

There is no exact functionality to do this.

没有确切的功能可以做到这一点。

Without wrapping another element inside, you could replace the border by a box-shadow and the padding by the border. But remember the box-shadow does not add to the dimensions of the element.

无需在内部包装另一个元素，您可以用 box-shadow 替换边框，并用边框替换填充。但请记住 box-shadow 不会增加元素的尺寸。

jsfiddle is being really slow, otherwise I'd add an example.

jsfiddle 真的很慢，否则我会添加一个例子。

Answer 9

回答by rlatief

I'd just wrap the header with another div and play with borders.

我只是用另一个 div 包裹标题并使用边框。

<div class="header-border"><div class="header-real">

    <p>Foo</p>

</div></div>

CSS:

CSS：

.header-border { border: 2px solid #000000; }
.header-real { border: 10px solid #003399; background: #cccccc; padding: 10px; }

Answer 10

回答by Magnawarp the great

You can do a div over the padding as follows:

您可以按如下方式对填充进行 div 操作：

<div id= "paddingOne">
</div>
<div id= "paddingTwo">
</div>

#paddingOne {
width: 100;
length: 100;
background-color: #000000;
margin: 0;
z-index: 2;
}
#paddingTwo {
width: 200;
length: 200;
background-color: #ffffff;
margin: 0;
z-index: 3;

the width, length, background color, margins, and z-index can vary of course, but in order to cover the padding, the z-index must be higher than 0 so that it will lay over the padding. You can fiddle with positioning and such to change its orientation. Hope that helps!

宽度、长度、背景颜色、边距和 z-index 当然可以变化，但为了覆盖 padding，z-index 必须大于 0，以便它覆盖 padding。你可以摆弄定位等来改变它的方向。希望有帮助！

P.S. the divs are html and the #paddingOne and #paddingTwo are css (in case anyone didn't get that:)

PS div 是 html，#paddingOne 和 #paddingTwo 是 css（以防有人没有得到：）

CSS 我可以只为填充添加背景颜色吗？

提问by Pavan Nadig

采纳答案by gotohales

回答by Muhammad Umer

回答by Danield

Use the `background-clip`and `box-shadow`properties.

使用`background-clip`和`box-shadow`属性。

Codepen demo

代码笔演示

回答by dave

回答by iKamy

回答by Jan Han?i?

回答by Simon

回答by MildlySerious

回答by rlatief

回答by Magnawarp the great

相关推荐

最近更新

标签

CSS 我可以只为填充添加背景颜色吗？

提问by Pavan Nadig

采纳答案by gotohales

回答by Muhammad Umer

回答by Danield

Use the background-clipand box-shadowproperties.

使用background-clip和box-shadow属性。

Codepen demo

代码笔演示

回答by dave

回答by iKamy

回答by Jan Han?i?

回答by Simon

回答by MildlySerious

回答by rlatief

回答by Magnawarp the great

相关推荐

CKEDITOR - 防止将图像尺寸添加为 css 样式

CSS 内部 div 在高度为 auto 的容器内具有 100% 的高度

CSS Div 和图像边距/填充

CSS 图片神秘地忽略了 Firefox 和 IE 中的最大宽度

相关推荐

最近更新

标签

Use the `background-clip`and `box-shadow`properties.

使用`background-clip`和`box-shadow`属性。