Блог

Главная - Вопросы по программированию - Уменьшите непрозрачность изображения, но не цвет фона кнопки

Уменьшите непрозрачность изображения, но не цвет фона кнопки

#html #css

Вопрос:

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

 .button {
  border-radius: 4px;
  background-color: #0F69AF;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 18px;
  padding: 20px;
  width: 100%;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  font-weight: bold;
  background-image: url("../Images/Test.png");
  background-size: cover;
  opacity: 0.5;
}

.button span {
  padding: 20px;
  color: #fff;
  font: 18px Arial, sans-serif;
}

.button span:after {
  content: '0bb';
  position: absolute;
  opacity: 0.5;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.button:hover span {
  padding-right: 25px;
}

.button:hover span:after {
  opacity: 1;
  right: 0;
} 
 <div class="column1" style="width:60%">
  <button class="button"><a href="../test" target="_blank"><span>Test1222</span> </a></button>
  <br><button class="button"><a href="../test" target="_blank"><span>TEST123</span> </a></button>
</div>

Комментарии:

1. Нет никакого свойства CSS, которое вы могли бы использовать для изменения непрозрачности только фонового изображения. Вам нужно реальное изображение — или (псевдо) элемент, который служит только контейнером для изображения, чтобы применить непрозрачность.

Ответ №1:

Нет никакого свойства CSS, которое вы могли бы использовать для изменения непрозрачности только фонового изображения. Вам нужно реальное изображение — или (псевдо) элемент, который служит только контейнером для изображения, чтобы применить непрозрачность.

 .button {
  border-radius: 4px;
  background-color: #0F69AF;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 18px;
  padding: 20px;
  width: 100%;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  font-weight: bold;
  /* needs to be positioned */
  position: relative;
}

.button::before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("//placekitten.com/400/100");
  background-size: cover;
  opacity: 0.5;
  content: '';
}

.button span {
  padding: 20px;
  color: #fff;
  font: 18px Arial, sans-serif;
}

.button span:after {
  content: '0bb';
  position: absolute;
  opacity: 0.5;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.button:hover span {
  padding-right: 25px;
}

.button:hover span:after {
  opacity: 1;
  right: 0;
} 
 <div class="column1" style="width:60%">
  <button class="button"><a href="../test" target="_blank"><span>Test1222</span> </a></button>
  <br><button class="button"><a href="../test" target="_blank"><span>TEST123</span> </a></button>
</div>

Ответ №2:

Вы можете использовать background-blend-mode: lighten; или другие значения, такие как экран или наложение. Важно, чтобы в качестве фона для эффекта было (цвет фона изображение) или два разных изображения.

Комментарии:

1. Однако это не позволит точно контролировать степень непрозрачности. Если это не требуется, ваш подход предпочтителен.

2. Очень верно, но я думал, что важен только эффект, а не контроль непрозрачности. Ваш ответ охватывает именно то приложение, каким оно должно быть. Слава!

Метки: ,