Блог

как мне сделать так, чтобы я уменьшал непрозрачность только для цвета BG, а не для содержимого, а не для границы.

css:

 .ghost-btn-small {
    text-decoration: none;
    text-align: center;
    margin: 320px auto 0 auto;
    background-color: #000000;
    opacity: 0.3;
    border: 1px solid #fff;
    height: 70px;
    width: 280px;
    line-height: 36px;
}
  

должен быть быстрый и простой способ?

Вместо копирования кодов почему бы вам не прочитать это:

При работе с CSS colors вы можете указать цвет несколькими способами:

• Название цвета

цвет фона: красный;

• Значение цвета RGB:

 background-color: #ff0000;
  

• функция rgb: эта функция принимает три цвета: красный, зеленый и синий в качестве параметров либо в виде целого числа, либо в процентах

 background-color: rgb(255,0,0); 

background-color: rgb(100%,0,0);
  

• функция rgba: Функция rgba похожа на функцию rgb, за исключением того, что имеет параметр alpha, который представляет степень прозрачности для использования. Оно должно быть между 0.0 и 1.0, где 0.0 невидимо, а 1.0 полностью непрозрачно.

 background-color:rgba(255,0,0,0.5);

background-color:rgba(100%,0,0,0.2);
  

• функция hsl: это функция оттенок-насыщенность-яркость, где оттенок — это угол цветового круга, насыщенность — это количество цвета, которое нужно обеспечить, а яркость — это количество света, которое нужно обеспечить. Обычно это используется для получения соответствующих цветов, сохраняя значение оттенка неизменным и регулируя насыщенность и яркость.

 background-color: hsl(0,100%, 50%);
  

Конечно, вы могли бы также установить свойство opacity, чтобы установить степень прозрачности элемента.

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

Попробуйте

 background-color:rgba(0,0,0,.3); 
  

вместо

  background-color:#000000; 
 opacity: 0.3;
  

Это относится только к цвету фона, а не к содержимому

 .ghost-btn-small {


text-decoration: none;
  text-align:center;
  margin: 320px auto 0 auto;
  background-color:rgba(0,0,0,0.3); 
  border: 1px solid #fff;
  height: 70px;
  width:280px;
  line-height: 36px;
}
  

Просто скопируйте это, и это сработает. Если вы присвоите классу атрибут непрозрачности, он будет применяться ко всему классу, поэтому ваша граница улавливала непрозрачность.