如何仅更改背景图像的不透明度？ [重复]-Java 学习之路

这个问题在这里已有答案：

How do I give text or an image a transparent background using CSS? 28个答案
Can I set an opacity only to the background image of a div? 8个答案
Set opacity of background image without affecting child elements 14个答案

我正在尝试更改背景图像的不透明度，使其与网站相匹配 . 问题是 opacity: 0.5; 改变了元素中的所有内容 . 因此，不仅背景图像会发生变化，而且文本和该部分中的所有其他元素也会发生变化 . 我怎么应该只改变图像的颜色？这是我的代码：

section {
   background-image: url(../IMG/Photo_NR1.jpg);
   padding: 15px;
   width: 100%;
   height: 700px;
}

我做了一些研究，但我找不到任何东西 . 我试图将所有元素都放在 <section> 标签之外，但后来我不得不再次改变元素的位置 . 谢谢你的时间：）

2 回答

您也可以通过伪元素执行此操作 . 像这样的东西：

section {
   position: relative;
   padding: 15px;
   width: 100%;
   height: 700px;
}

section::before {
  content: "";
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: .5; 
  background-image: url(../IMG/Photo_NR1.jpg);
}

因此，您不需要图像标记，而是将设计与内容分离 .

回复于 2024-04-20T19:59:51+08:00

尝试分离图像 .

HTML：

<div class="my-container">
    <img src="your/image">
</div>

CSS：

.my-container {
    position: relative;
    overflow: hidden;
}
.my-container img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
    opacity: 0.5;
}

资料来源：https://scotch.io/tutorials/how-to-change-a-css-background-images-opacity

回复于 2024-04-20T19:59:51+08:00

如何仅更改背景图像的不透明度？ [重复]

2 回答

相关问题