За последние 24 часа нас посетили 20118 программистов и 1695 роботов. Сейчас ищут 1832 программиста ...

Прозрачность главного элемента

Тема в разделе "HTML и CSS", создана пользователем Exort, 2 май 2016.

  1. Exort

    Exort Активный пользователь

    С нами с:
    30 апр 2016
    Сообщения:
    100
    Симпатии:
    2
    [​IMG]
    Когда я устанавливаю #header opacity на 0.5 , все элементы, входящие в него, также перенимают это значение.
    Как бороться?
    HTML:
    1.  
    2.     <head>
    3.         <meta charset="utf-8">
    4.             <link href="css/style.css" rel="stylesheet">
    5.             </head>
    6.             <body>
    7.                 <div id = "wrapper">
    8.                     <div id = "header">
    9.                         <div id = "header_image"><img src="images/logo.png" align = "left" width="17.5%"></img>
    10.                         <div id = "header_text">
    11.                             <p>«Web-квест» по теме: „Материнская плата и её маркировка“</p>
    12.                         </div>
    13.                     </div>
    14.                 </div>
    15.             </body>
    16.         </html>
    17.  
    18. #header {
    19.     width: 100%;
    20.     height: 30%;
    21.     background: #FFA500;
    22.     opacity: 1.0;
    23. }
    24. #header_image {
    25.     padding-top: 0.3%;
    26.     padding-left: 3%;
    27.     opacity: 1.0;
    28. }
    29. #header_text {
    30.     font-family: Raleway_bold;
    31.     font-size: 200%;
    32.     text-align: left;
    33.     margin-left: 25%;
    34.     padding-top: 4.5%;
    35.     color: #ffffff;
    36.     opacity: 1.0;
    37. }
    38.  
     
  2. TeslaFeo

    TeslaFeo Старожил

    С нами с:
    9 мар 2016
    Сообщения:
    2.984
    Симпатии:
    759
    никак не бороться. Все вложенные элементы становятся прозрачными.
    Тебя спасёт position:absolute;
     
  3. Exort

    Exort Активный пользователь

    С нами с:
    30 апр 2016
    Сообщения:
    100
    Симпатии:
    2
    HTML:
    1. #header: {
    2. opacity заменить на background-color: rgba(255,  165, 0, 0.7);
    3. }
    Разобрался.
     
  4. mr.akv

    mr.akv Активный пользователь

    С нами с:
    31 мар 2015
    Сообщения:
    1.604
    Симпатии:
    206