Как уменьшить непрозрачность фонового изображения, если я напрямую связал URL-адрес изображения с Google?

Question

Я пытаюсь уменьшить непрозрачность фона, но так как я напрямую связал изображение с Google, оно не работает должным образом.

.form {
  background-image: linear-gradient(rgb(84, 58, 231), rgb(91, 27, 240));
  width: 400px;
  height: 600px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  border-radius: 16px;
  padding: 120px 50px;
  box-shadow: 2px 2px 8px #8888888f;
  background-image: url("https://cdn.pixabay.com/photo/2016/07/03/18/04/tech-1495181_1280.jpg");
  opacity: 0.6;
}

непрозрачность уменьшает весь раздел .form, включая входные данные формы / текст / и изображение.

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

В итоге я заработал, добавив новый пустой div тег с классом img-overlay, затем я добавил этот код в css

.img-overlay {
  background-image: url("https://cdn.pixabay.com/photo/2016/07/03/18/04/tech-1495181_1280.jpg");
  position: absolute;
  transform: translate(-12.5%, -20%);
  opacity: 0.2;
  width: 400px;
  height: 600px;
  border-radius: 16px;
  z-index: -1;
}

Answer 1

Простой ответ: вы не можете. CSS не обрабатывает непрозрачность фонового изображения.

Но что вы можете сделать, это добавить псевдоэлемент, представляющий собой изображение с непрозрачностью, или использовать фактический элемент, являющийся либо <img>, либо другой элемент с background-image и opacity.

.some-element:before {
    content: url('https://i.picsum.photos/id/1/1440/900.jpg');
    opacity: 0.5;
    /* some other properties of your image */
}