Почему прозрачный текст?

Html:Почему прозрачный текст?

<!DOCTYPE html> 
<html> 
<head> 
    <link rel="stylesheet" type="text/css" href="style.css"> 
    <script src="script.js"></script> 
    <title>Cool Effect</title> 
</head> 
<body> 

    <div class="imageHolder"> 
     <span class="note">Hello!</span> 
     <img src="picture1.jpeg"> 
    </div> 

</body> 
</html>

CSS:

.imageHolder { 
    position: relative; 
    border: 1px solid black; 
    width: 300px; 
    height: 250px; 
    text-align: center; 
    overflow: hidden; 
    background-color: black; 
} 

.note { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    -webkit-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%); 
    border: 2px solid white; 
    padding: 8px; 
    color: white; 
    opacity: 1; 
    font-size: 24px; 
    display: inline-block; 
} 

img { 
    width: 300; 
    opacity: 0.4; 
    height: 250px; 
}

Fiddle: https://jsfiddle.net/xsqosw0c/1/

Текст в пролете, кажется, слегка прозрачным, вместо твердого белого. Я не знаю, почему это происходит. Более ясно, если размер шрифта больше.

Спасибо.

источник

2015-07-22 George

Это непрозрачность. – Stickers

Это потому, что текст позади изображения. Используйте z-index, чтобы исправить это:

.note { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    -webkit-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%); 
    border: 2px solid white; 
    padding: 8px; 
    color: white; 
    opacity: 1; 
    font-size: 24px; 
    display: inline-block; 

    z-index:2000; 
}

z-index перемещает элемент вперед или назад в CSS «слоев». По умолчанию элементы HTML будут «слоистыми» в том порядке, в котором они отображаются в коде HTML. Вы можете либо переупорядочить свои строки HTML, либо применить z-index

источник

2015-07-22 18:03:55

его, потому что ваш IMG был над этим текстом

<div class="imageHolder"> 
    <img src="https://portthemedemo.files.wordpress.com/2014/06/bike.jpg?w=317&h=239&crop=1"> 
    <span class="note">Hello!</span> 
</div>

источник

2015-07-22 18:02:16

Почему прозрачный текст?

ответ

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