Не прозрачное содержимое на прозрачном фоне блока

Тема в разделе "CSS, HTML, Web 2.0, верстка по web-стандартам", создана пользователем Geksagent, 22.02.2013.

  1. Offline

    Geksagent Недавно здесь

    Регистрация:
    16.11.2011
    Сообщения:
    9
    Симпатии:
    0
    Пол:
    Мужской
    Помогите плиз!!!!!
    что сделать с этим кодом, чтобы содержимое блоков было не прозрачным. Чё тока не
    пробовал :(

    /* Module Type: Box
    ------------------------------------------------------------------------------------

    ----------------*/
    .mod-box {
    padding: 15px;
    background: #036;
    opacity: 0.5;
    color: #fff;}

    .mod-box-transparent {
    color: #fff;
    box-shadow: 0 0 1px rgba(255,255,255,0.2);
    }
     
  2.  
  3. draff
    Offline

    draff Russian Joomla! Team Команда форума

    Регистрация:
    17.01.2011
    Сообщения:
    6 037
    Симпатии:
    518
    Пол:
    Мужской
    пропиши без 0.2 или вообще убери свойство
     
  4. Offline

    Geksagent Недавно здесь

    Регистрация:
    16.11.2011
    Сообщения:
    9
    Симпатии:
    0
    Пол:
    Мужской
    Спасибо за отклик, но сие действие не принесло результата. :( вобщем то вообще ничего не изменилось.
    О подобной проблемме написано много, но все решения одинаковы и к данному коду не применимы. кроме
    opacity: 0.5;
    Если необходимо то привожу пример всего кода.

    Код (html):
    1. /* Copyright (C) YOOtheme GmbH, YOOtheme Proprietary Use License (http://www.yootheme.com/license) */
    2.  
    3. @import url(../warp/css/modules.css);
    4.  
    5.  
    6. /* Module Badges
    7. ----------------------------------------------------------------------------------------------------*/
    8.  
    9. .module .badge {
    10.     top: -7px;
    11.     right: -7px;
    12.     width: 32px;
    13.     height: 32px;
    14.     background: url(../images/module_badges.png) 0 0 no-repeat;
    15. }
    16.  
    17. .module .badge-hot { background-position: 0 0; }
    18. .module .badge-top { background-position: 0 -40px; }
    19. .module .badge-free { background-position: 0 -80px; }
    20. .module .badge-new { background-position: 0 -120px; }
    21.  
    22. /* Module Title
    23. ----------------------------------------------------------------------------------------------------*/
    24.  
    25. .module .module-title {
    26.     font-size: 36px;
    27.     line-height: 36px;
    28.     text-align: center;
    29. }
    30.  
    31. .module.has-icon .module-title { text-align: left; }
    32.  
    33. /* Module Icons
    34. ----------------------------------------------------------------------------------------------------*/
    35.  
    36. .module .module-title .icon {
    37.     top: 0;
    38.     height: 36px;
    39.     width: 36px;
    40.     margin-right: 10px;
    41.     background: url(../images/module_icons.png) 0 0 no-repeat;
    42. }
    43.  
    44. .module .module-title .icon-download { background-position: 0 0; }
    45. .module .module-title .icon-twitter { background-position: 0 -40px; }
    46. .module .module-title .icon-mail { background-position: 0 -80px; }
    47. .module .module-title .icon-bubble { background-position: 0 -120px; }
    48. .module .module-title .icon-login { background-position: 0 -160px; }
    49. .module .module-title .icon-cart { background-position: 0 -200px; }
    50.  
    51.  
    52. /* Module Type: Box
    53. ----------------------------------------------------------------------------------------------------*/
    54. .mod-box {
    55.     padding: 15px;
    56.     background: #036;
    57.         opacity: 0.5;
    58.     color: #fff;}
    59.  
    60. .mod-box-transparent {
    61.     color: #fff;
    62. box-shadow: 0 0 1px rgba(255,255,255,0.2);
    63. }
    64.  
    65.  
    66. .mod-box-transparent .menu-sidebar a,
    67. .mod-box-color1 .menu-sidebar a,
    68. .mod-box-color2 .menu-sidebar a,
    69. .mod-box-transparent .menu-sidebar li > span,
    70. .mod-box-color1 .menu-sidebar li > span,
    71. .mod-box-color2 .menu-sidebar li > span { color: #ffffff; }
    72.  
    73. .mod-box-transparent .menu-sidebar a.level1 > span,
    74. .mod-box-color1 .menu-sidebar a.level1 > span,
    75. .mod-box-color2 .menu-sidebar a.level1 > span,
    76. .mod-box-transparent .menu-sidebar span.level1 > span,
    77. .mod-box-color1 .menu-sidebar span.level1 > span,
    78. .mod-box-color2 .menu-sidebar span.level1 > span { border-color: rgba(255,255,255,0); }
    79.  
    80. .mod-box-transparent .menu-sidebar a.level1:hover > span,
    81. .mod-box-color1 .menu-sidebar a.level1:hover > span,
    82. .mod-box-color2 .menu-sidebar a.level1:hover > span { border-color: rgba(255,255,255,0.5); }
    83.  
    84. .mod-box-transparent .menu-sidebar li.parent .level1 > span,
    85. .mod-box-color1 .menu-sidebar li.parent .level1 > span,
    86. .mod-box-color2 .menu-sidebar li.parent .level1 > span { background-image: url(../images/module_badges.png); }
    87.  
    88. .mod-box-transparent .menu-sidebar .level2 a > span,
    89. .mod-box-color1 .menu-sidebar .level2 a > span,
    90. .mod-box-color2 .menu-sidebar .level2 a > span { background-image: url(../images/module_badges.png); }
    91.  
    92. .mod-box-color1,
    93. .mod-box-color2 {
    94.     color: #ffffff;
    95.     box-shadow: 0 0 1px rgba(0,0,0,0.2);
    96. }
    97.  
    98. .mod-box-color1 a:hover,
    99. .mod-box-color2 a:hover { color: #ffffff; }
    100.  
    101. .mod-box-color1 em,
    102. .mod-box-color1 code,
    103. .mod-box-color2 em,
    104. .mod-box-color2 code { color: #036; }
    105.  
    106. .mod-box-transparent em,
    107. .mod-box-transparent code,
    108. .system-transparent #system .item em,
    109. .system-transparent #system .item code { color: #036; }
    110.  
    111. .mod-box-transparent .module-title .icon,
    112. .mod-box-color1 .module-title .icon,
    113. .mod-box-color2 .module-title .icon { background-image: url(../images/module_badges.png); }


    Замечание: для вставки кодов в сообщение используйте тэги
    Код (CODE):
    1. , [HTML] или [PHP].[/B][/COLOR]
     
    Последнее редактирование модератором: 22.02.2013
  5. Offline

    diki Недавно здесь

    Регистрация:
    09.03.2011
    Сообщения:
    118
    Симпатии:
    0
    Пол:
    Мужской
    opacity: 1;

    Браузеры
    Firefox до версии 3.5 поддерживает нестандартное свойство -moz-opacity.

    Internet Explorer до версии 9.0 для изменения прозрачности использует фильтры, для этого браузера следует записать filter: alpha(opacity=50), где параметр opacity может принимать значение от 0 до 100.
     
  6. Offline

    Geksagent Недавно здесь

    Регистрация:
    16.11.2011
    Сообщения:
    9
    Симпатии:
    0
    Пол:
    Мужской
    С фильтрами всё ясно. Но проблема то не в этом. Прозрачность идёт вместе со всем содержимым блока. А надо чтобы содержимое оставалось не прозрачным. на данный момент это выглядит вот так Пример:http://stgennady.besaba.com/ блоки справа и сверху. А хотелось бы как в основном блоке.
     
  7. Offline

    TroL специалист

    Регистрация:
    01.03.2011
    Сообщения:
    502
    Симпатии:
    34
    Пол:
    Мужской
    можно использовать полупрзрачную пнг картинку и заполнить ею фон
     

Поделиться этой страницей

Загрузка...