Блог

Главная - Вопросы по программированию - Непрозрачное изображение поверх прозрачного баннера и фона?

Непрозрачное изображение поверх прозрачного баннера и фона?

#css #html #opacity

#css #HTML #непрозрачность

Вопрос:

Хорошо, по какой-то причине мое изображение, которое на 100% непрозрачно, отображается частично прозрачным и показывает баннер и фоновое изображение за ним. Как мне это исправить?

Вот моя таблица стилей:

 #banner{
    width:1280px;
    height:80px;
    line-height:100px;
    background-color:#a8a8a8;
    text-align:center;
    font-size:40px;
    color:#00FF00;
}

#content{
    width:100%;
    font-family:comic;
    font-size:14px;
    padding:10%;
    margin:auto;
    margin-top:200px;
}

#greeting{
    margin-top:-275px;
    margin-left:640px;
    font-size:25px;
}

#graphic{
    margin-left:640px;
    margin-bottom:-140px;
}

#banner{
    width:1280px;
    height:80px;
    line-height:100px;
    background-color:#a8a8a8;
    text-align:center;
    font-size:40px;
    color:#00FF00;
    opacity: 0.5;
    filter: alpha(opacity=25);
    margin-top: 20px;
}

#background{
    margin-bottom:-860px;
    opacity: 0.4;
    filter: alpha(opacity=25);
}

вот мой html:

 <!DOCTYPE html>
<html>
<head>
    <link href="style.css" rel="stylesheet" type="text/css" align="center">
</head>

<body>      
    <div id="graphic">
        <img src="jmfiller2.png" height="150">
    </div>      

    <div id="banner"></div> 

    <div id="greeting">
    Hello! Welcome to my portfolio site! 
    </div>
    <div id="content"></div>
    <div id="background">
        <img src="background5.JPG">
    </div>

</body>
</html>

Ответ №1:

Установка непрозрачности как свойства элемента в CSS воздействует на все, что содержится в этом элементе.

Другими словами, если для вашего баннера div установлена непрозрачность 50% / 25%, все в нем также будет непрозрачным на 50% / 25%.

и кажется, что часть HTML отсутствует, если только вы просто не разместили все это

Ответ №2:

Скотт прав, вы установили для родительского элемента прозрачность, которая будет применена ко всем дочерним элементам, и вы абсолютно ничего не можете сделать, чтобы сделать дочерний элемент непрозрачным, когда родительский CSS установлен на уровень прозрачности.

Я знаю два подходящих обходных пути для этого:

  1. Используйте крошечное PNG изображение для «имитации» прозрачности с помощью следующего:

     background:url(path/to/image/semi-transparent-background.png) repeat;

  2. Вы можете создать прозрачный фон для псевдоэлемента, используя :before или :after .

В зависимости от того, какую степень обратной совместимости вы хотите, вы можете выбрать один или оба из этих параметра с помощью медиа-запросов и тому подобного.

Ответ №3:

Я немного изменил ваш css, баннер больше не прозрачный:

 #content{
    width:100%;
    font-family:comic;
    font-size:14px;
    padding:10%;
    margin:auto;
    margin-top:200px;
}

#greeting{
    margin-top:-275px;
    margin-left:640px;
    font-size:25px;
}

#graphic{
    margin-left:640px;
    margin-bottom:-140px;
}

#banner{
    width:1280px;
    height:80px;
    line-height:100px;
    background-color:#a8a8a8;
    text-align:center;
    font-size:40px;
    color:#00FF00;
    margin-top: 20px;
}

#background{
    margin-bottom:-860px;
    opacity: 0.4;
    filter: alpha(opacity=25);
}