如何向包装器内部的div(具有id)添加背景色?

Below is my code. Im using the framework skeleton. I have separate divs that represents three,seven and six columns that equal 16(skeleton is a 16 column framework). Therefore the the 3 divs are all inline accross the screen. The wrapper has a background color grey, therefore making the whole scree grey. However, i want to make the background color of the 3 div classes black. Any ideas? As ive tried to put all 3 divs into another div with an id, and set the background black however did not work?

下面是我的代码。我使用框架骨架。我有单独的divs，分别表示3、7和6列，它们等于16(skeleton是一个16列框架)。因此，3个divs都是直排在屏幕上。包装有一个背景色灰色，因此使整个灰色。但是，我想让3个div类的背景颜色变为黑色。什么好主意吗?当我试着把所有3个div放入另一个有id的div中，并设置背景为黑色，但是没有效果?

<div id="wrapper">
    <div class="container">       

       <div class="three columns">
            <img src="images/ste.jpg" alt="" height="150px" width="160px" />
            <hr />
       </div>

       <div class="seven columns">
         <div id="namechange" class="six columns">
            <u><h4>Stephen Carter</h4></u>
            <p>I am  currently studentying at Leeds Beckett University, and this module is called Advanced Internet Development B </p>
            <hr />
        </div>
       </div>
     <div id="navchange" class="six columns">
        <a href="#">About</a>
        <a href="#">Portfolio</a>
        <a href="#">Blog</a>
        <a href="#">Contact</a>
        <hr />

            </div>
</div>
</div>

6 个解决方案

#1

Add background color to your classes

为你的类添加背景色

.three, .seven, .six{
    background-color:black;
}

Fiddle with skeleton

摆弄骨架

#2

Maybe I'm thinking to easy, but how about:

也许我想简单点，但是:

#wrapper {
    background: grey;
}
.three, .seven, .six {
    background: lightblue;
}

See this JSFiddle.

看到这个JSFiddle。

If it doesn't work for you, please share your CSS.

如果它不适合你，请分享你的CSS。

#3

//try this css code

/ /试试这个css代码

.three, .seven, .six {
    background-color:#000000 !important;
}

#4

Did you try this?

你试试这个吗?

#wrapper .three, #wrapper .seven, #wrapper .six {
    background-color:#000000 !important;
}

#5

May be your div#wrapper background color overrides the div#wrapper inside div background color,so add like below:

可能是您的div#包装背景色覆盖了div#包装器的内部div背景颜色，所以添加如下:

#wrapper{background:grey;}
#wrapper div{background:black;}

or add !important like below:

或者添加!如下所示:

#wrapper div{background:black !important;}

#6

-1

You just need to do that :

你只需要这样做:

<div style="background-color: #000000;">

And change the hexadecimal value for the color you want.

并改变十六进制值为你想要的颜色。

Or do that with CSS by usign your classes :

或者通过usign你的类来实现CSS:

.yourClass {
background-color: #000000;
}

#1