如何在img上放文字，并使图片透明

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 在背景上伪造一个元素。不过，对 div 执行此操作并让您的文本与 div 对齐会更合适。我还建议将 background-repeat 也设置为 no-repeat，这样只有一张图片会显示并且大小相等。

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>

如何在img上放文字，并使图片透明

How to put text on img, and make the image transparent

html

image

opacity

transparent