div с цветом фона, полупрозрачность и граница с невидимой границей?

Question

У меня есть некоторые дивы, как это:

• Второй DIV имеет класс highlit
• Третий DIV имеет класс обрамленное
• Четвертый DIV имеет как highlit и оформлена.

Почему граница исчезает в четвертом случае?

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> 

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

Answer 1

Таковы правила CSS у вас есть:

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

Теперь, для 4-го числа <div> оба вышеуказанных стиля смешиваются. Значит, есть background-color: #fff вместе с border: 2px solid #fff.

Как вы можете видеть, оба они белого цвета. И из-за этого вы не можете отличить границу.

Постарайтесь изменить color любого из приведенных выше правил, и вы получите решение.

Надеюсь, это поможет. :)

Answer 2

Попробуйте это:

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

Answer 3

Потому что background-color и border-color такой же (#fff) в четвертом дивизионе.
Вы используете .overlay класс, который имеет следующее:

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

Answer 4

Вы хотите этого, должен быть понятен;)

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

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

Answer 5

Это не исчезает - просто гармонирующий с остальной частью оверлея и, поскольку вы установили его непрозрачным, он станет фиолетовым. Если вы только желая фон, чтобы быть непрозрачным, а не весь оверлей вам нужно будет использовать RGBA цвет фона:

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

Example

This should work back to ie 8