Как поместить текст на img и сделать изображение прозрачным

-1

Я оглядывался, но не нашел, что мне нужно. У меня есть место, чтобы написать только html. (не может создать JS или другой файл для css)Как поместить текст на 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

«Непрозрачность» влияет на все элементы контейнера, включая текст. – melancia

Невозможно добавить непрозрачность к фоновому изображению. Лучше всего сделать фальсификацию элемента над фоном, используя css для after. Правильнее было бы сделать это с 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, что позволит вам использовать альфа-канал, который позволяет использовать произвольные уровни непрозрачности. Так как вы не можете использовать 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

Try:

<!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 и сделать изображение прозрачным

ответ

Смежные вопросы