如何在img上放置文本，並使圖像透明

-1

我四處張望，但沒有找到我需要的東西。我有地方只寫一個HTML。（無法爲css創建JS或其他文件）如何在img上放置文本，並使圖像透明

我想在屏幕上放置圖像，以便能夠更改圖像不透明度，並且還可以在圖像上放置文本。

我嘗試這樣做：

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

<h1>Hello World!</h1> 

</body> 
</html>

但不透明度似乎是在文本，而不是圖像。

有人可以幫我嗎？謝謝大家！

來源

2015-01-15 shlomi

我不太確定你想要什麼，但*威力*是[這]（ http://stackoverflow.com/questions/4997493/set-opacity-of-background-image-without-affecting-child-elements）。 – JCOC611 2015-01-15 16:57:45

「不透明度」將影響所有容器元素，包括文本。 – melancia 2015-01-15 17:01:28

沒有適當的方法來爲背景圖像添加不透明度。最好的辦法是在後臺使用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

來源

2015-01-15 17:05:03 Asheliahut

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>

來源

2015-01-15 17:03:59

嘗試：

<!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>

來源

2015-01-15 17:20:24 Rounin

如何在img上放置文本，並使圖像透明

回答

相關問題