CODEWITHSUNDEEP
css
Anders Lindén
Anders Lindén

Reputation: 7323

div with background color, semi opacity and border has invisible border?

I have some divs like this:

enter image description here

Why is the border disappearing in the fourth case?

http://jsfiddle.net/ycyrwgcz/3/

html

<table>
    <tr>
        <td>
            <div class="thumb"><div class="overlay"></div></div>
        </td>
        <td>
            +
        </td>
        <td>
            <div class="highlit thumb"><div class="overlay"></div></div>
        </td>
        <td>
            +
        </td>
        <td>
            <div class="framed thumb"><div class="overlay"></div></div>
        </td>
        <td>
            =
        </td>
        <td>
            <div class="highlit framed thumb"><div class="overlay"></div></div>
        </td>
    </tr>
</table>

with the css

body
{
    background-color: #ff8888;
}

.thumb
{
    width: 40px;
    height: 40px;
    display: inline-block;
    margin: 10px;
    background-color: #8888ff;
}

.overlay
{
    height: 100%;
}

.thumb.framed .overlay
{
    border: 2px solid #fff;
    box-sizing: border-box;
}

.thumb.highlit .overlay
{
    background-color: #fff;
    opacity: 0.4;
}

Upvotes: 0

Views: 114

Answers (5)

Pete
Pete

Reputation: 58442

It isn't disappearing - just blending in with the rest of the overlay and as you have set it to be opaque it will turn purple. If you are only wanting the background to be opaque and not the whole overlay you will need to use rgba background colours:

.thumb.highlit .overlay
{
    background-color: rgba(255,255,255,0.4);
}

Example

This should work back to ie 8

Upvotes: 1

Beowolve
Beowolve

Reputation: 558

You want this, should be self explaining ;)

.thumb.highlit .overlay {
  background-color: rgba(255,255,255,0.4);
}

http://jsfiddle.net/fxxf6kcs/1/

Upvotes: 1

aniskhan001
aniskhan001

Reputation: 8521

Because the background-color and border-color is same (#fff) in the fourth div.
You are using .overlay class which has the following:

.thumb.highlit .overlay {
    background-color: #fff;
    opacity: 0.4;
}
.thumb.framed .overlay {
    border: 2px solid #fff;
    box-sizing: border-box;
}

Upvotes: 0

Rishabh Shah
Rishabh Shah

Reputation: 679

These are the css rules you have:

.thumb.highlit .overlay {
  background-color: #FFF;
  opacity: 0.4;
}
.thumb.framed .overlay {
  box-sizing: border-box;
  border: 2px solid #FFF;
}

Now, for the 4th <div> both the above styles get mixed up. Means, there is a background-color: #fff along with border: 2px solid #fff.

As you can see, both these are white color. And because of this you're not able to distinguish the border.

Try to change the color of any one of the above rules and you'll get the solution.

Hope this helps. :)

Upvotes: 1

Samuele Panarotto
Samuele Panarotto

Reputation: 277

Try this:

body
{
    background-color: #ff8888;
}

.thumb
{
    width: 40px;
    height: 40px;
    display: inline-block;
    margin: 10px;
    background-color: #8888ff;
}

.overlay
{
    height: 100%;
}

.thumb.framed 
{
    border: 2px solid #fff;
    box-sizing: border-box;
}

.thumb.framed .overlay
{
    box-sizing: border-box;
}

.thumb.highlit .overlay
{
    background-color: #fff;
    opacity: 0.4;
}

Upvotes: 0

Related Questions