Как исключить границу из изменения непрозрачности

Question

У меня есть этот CSS:

#name { 
    border: 1px solid #fff;
    color: #a5a5a5;
    opacity: 0.3;
    font-size: 11px;
    font-family: "times new roman";
}

однако для границы также задана непрозрачность 0,3, но я не хочу, чтобы у границы была непрозрачность. Как исключить этот элемент?

Answer 1

Вы не можете. opacity устанавливает непрозрачность для всего элемента. В зависимости от фактического содержания элемента у вас есть два варианта:

1. Оберните все содержимое в <div> и примените к нему границу.
2. Если есть только текст и / или фон, используйте rgba, чтобы указать цвет текста и / или цвет / градиент фона вместо opacity.

Answer 2

Измените структуру HTML на:

<div id="name">
    <div>
       Stuff
    </div>
<div>

И CSS на:

#name { 
    border: 1px solid #fff;
}

#name div { 
    color: #a5a5a5;
    opacity: 0.3;
    font-size: 11px;
    font-family: "times new roman";
}

Answer 3

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

#name { 
    border: 1px solid #fff;
    color: #a5a5a5;
    opacity: 0.3;
    font-size: 11px;
    font-family: "times new roman";
    height: 50px;
}

#name:after {
    height: 50px;
    border: 1px solid rgba(255, 255, 255, 1);
    content: '';
    display: block;
} 

Answer 4

Вы можете создать контейнер.

#name {
    border: 1px solid #fff;
    color: #a5a5a5;
    font-size: 11px;
    font-family: times new roman;
}

.op3 {
    opacity: 0.3;
}

<div id="name">
    <div class="op3">
       <!-- content -->
    </div>
</div>

Answer 5

Вы можете добавить контейнер с рамкой и содержимое с непрозрачностью:

<div id="container" style="border:1px solid #fff">
  <div id="name">
   --------
   </div>
</div>