Question

我环顾四周但没找到我需要的东西。我有地方只写一个HTML。（无法为css创建JS或不同的文件）

我想在屏幕上放置一个图像，以便能够更改图像的不透明度，还可以在图像上放置文字。

我试过了：

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-image: url("paper.gif");
    opacity: 0.1;
}
</style>
</head>
<body>

<h1>Hello World!</h1>

</body>
</html>

但不透明度似乎是在文字上，而不是在图像上。

是的，有人能帮帮我吗？谢谢大家！

Answer 1

opacity属性适用于您身体中的前景元素，而不适用于背景图像。现在，最简单的解决方案就是使用PNG，它允许您使用允许任意级别不透明度的Alpha通道。既然你不能使用JS，我想你无论如何都希望它是静态的。

另一种选择是简单地将图像作为对象放在页面上（<img ... />），给它一个具有有限不透明度的样式，并将其放在后台，同时给出body背景颜色为rgba(0,0,0,0)。

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background: rgba(0,0,0,0);
}
.halftransparent {
    opacity: 0.2;
    position: absolute; 
    /* position correctly here */
}

</style>
</head>
<body>
<img class="halftransparent" src="whatevs.jpg" alt="this is a nice background image" />
<h1>Hello World!</h1>

</body>
</html>

Answer 2

没有正确的方法可以为背景图像添加不透明度。最好的办法是使用css for after伪装一个元素。尽管对div进行此操作会更合适，并将文本与div对齐。我还建议将背景重复设置为不重复，因此只显示一个图像并且大小相等。

body::after {
  content: "";
  background-image: url(paper.gif");
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}

以下是此信息来自的文章：here

Answer 3

尝试：

<!DOCTYPE html>
<html>
<head>
<style>

body {
margin:0;
padding:0;
}

h1 {
position:absolute;
top:0;
left:12px;
z-index:12;
height:36px;
line-height:36px;
}

main {
display:block;
position:absolute;
top:0;
left:0;
z-index:0;
width: 100%;
height: 100%;
padding:72px 12px;
background-image: url("paper.gif");
opacity:0.1;
}

</style>
</head>

<body>
<h1>Hello World!</h1>

<main>
CONTENT HERE
</main>

</body>
</html>

如何在图像上放置文字，使图像透明

3 个答案: