Css 如果我直接从谷歌链接图片url，如何降低背景图片的不透明度？

我试图降低背景的不透明度，但由于我直接从谷歌链接了图像，它不能正常工作

.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部分，包括表单输入/文本/和图像

我试图只降低背景图像的不透明度，所以我的背景线性梯度仍然会显示在背景图像上

最后，我使用类img overlay添加了一个新的空div标记，然后将此代码添加到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;
}

---

答案很简单：你不能。CSS不处理背景图像不透明度

但您可以做的是，添加一个伪元素作为不透明度的图像，或者使用一个实际元素作为

或另一个元素作为

背景图像和
不透明度

。某些元素：在{
内容：url（'https://i.picsum.photos/id/1/1440/900.jpg');
不透明度：0.5；
/*图像的其他一些属性*/
}
我之前尝试过，但由于某种原因，它没有显示我的图像。仅显示原始的.form css。这是我添加的内容，但没有显示我的图像
.form:before{背景图像：url（“https://cdn.pixabay.com/photo/2016/07/03/18/04/tech-1495181_1280.jpg不透明度：0.5；}
它不起作用，因为需要
内容
属性才能显示伪元素，即使
内容：'
也会起作用。但是，如果要应用背景，还需要为伪元素设置
宽度
和
高度
。这就是为什么我使用了
content:url（…）
，因为它更像
。所以唯一的替代方法是将img保存到文件夹中，然后将img添加到我的html？这与图像是外部的或本地的无关。你想让图像覆盖整个表单吗？是的，基本上把它作为一个背景，具有超轻的不透明度，所以你几乎看不到它。只是想让它与我当前的背景色融合