Прозрачный цвет фона CSS

88

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

Саранья
источник
Да, конечно! Вы можете сделать это с помощью этого трюка: stackoverflow.com/a/15351192/366884 Удачи
Сауд Альфадли

Ответы:

116

теперь вы можете использовать rgba в свойствах CSS следующим образом:

.class {
    background: rgba(0,0,0,0.5);
}

0,5 - это прозрачность , измените значения в соответствии с вашим дизайном.

Живая демонстрация http://jsfiddle.net/EeAaB/

больше информации http://css-tricks.com/rgba-browser-support/

Рохит Азад Малик
источник
Спасибо. но я хочу, чтобы стрелка по умолчанию исчезла в меню списка, не затрагивая шрифт
Saranya
1
есть ли способ написать это короче, например rgba('black', 0.5)?
phil294
43

Имейте в виду эти три варианта (вы хотите №3):

1) Весь элемент прозрачен:

visibility: hidden;

2) Целый элемент несколько прозрачен:

opacity: 0.0 - 1.0;

3) Прозрачен только фон элемента:

background-color: transparent;
Иордания
источник
14

да, это возможно. просто используйте синтаксис rgba для цвета фона.

.menue{
  background-color: rgba(255, 0, 0, 0.5); //semi-transparent red
}
Oezi
источник
2
Здравствуй! Знаете ли вы что-нибудь об определении CSS 'background-color' с каналом aplha, но с использованием значения #HEX для цвета?
Петр Степневски
@ PiotrStępniewski Возможно, поздно, но теперь есть такой синтаксис (см. Мой ответ )
FZs
10

Вот пример класса с использованием именованных цветов CSS:

.semi-transparent {
  background: yellow;
  opacity: 0.25;
}

Это добавляет фон, который будет на 25% непрозрачным (цветным) и на 75% прозрачным.

CAVEAT К сожалению, непрозрачность повлияет на весь элемент, к которому она прикреплена.
Поэтому, если у вас есть текст в этом элементе, он также установит непрозрачность текста на 25%. :-(

Чтобы избежать этого, используйте методы rgbaили, hslaчтобы указать прозрачность как часть желаемого «цвета» фона. Это позволяет вам указать прозрачность фона независимо от прозрачности других элементов вашего элемента.

Вот 3 способа установить синий фон с прозрачностью 75%, не затрагивая другие элементы:

  • background: rgba(0%, 0%, 100%, 0.75)
  • background: rgba(0, 0, 255, 0.75)
  • background: hsla(240, 100%, 50%, 0.75)
ШерилХохман
источник
8

В этом случае background-color:rgba(0,0,0,0.5);это лучший способ. Например:background-color:rgba(0,0,0,opacity option);

dasdasdasdasd
источник
6

Для этого вам нужно изменить background-colorэлемент.

Способы создания (полу) прозрачного цвета:

  • Имя цвета CSS transparentсоздает полностью прозрачный цвет.

    Применение:

      .transparent{
        background-color: transparent;
      }
    
  • Использование rgbaили hslaцвета функции, которые позволяют добавить альфа - канал (прозрачность) до rgbи hslфункций. Их альфа-значения варьируются от 0 до 1.

    Применение:

      .semi-transparent-yellow{
        background-color: rgba(255, 255, 0, 0.5);
      }
      .transparent{
        background-color:  hsla(0, 0%, 0%, 0);
      }
    
  • Помимо уже упомянутых решений, вы также можете использовать формат HEX с альфа-значением ( #RRGGBBAAили #RGBAобозначением ).

    Это довольно ново (содержится в цветном модуле CSS уровня 4), но уже реализовано в более крупных браузерах (извините, нет IE).

    Это отличается от других решений, так как при этом альфа-канал (непрозрачность) также рассматривается как шестнадцатеричное значение, что делает его диапазон от 0 до 255 ( FF).

    Применение:

      .semi-transparent-yellow{
        background-color: #FFFF0080;
      }
      .transparent{
        background-color: #0000;
      }
    

Вы также можете попробовать их:

  • transparent:

  • rgba():

  • #RRGGBBAA:

ФЗ
источник
5

Попробуй это:

opacity:0;

Для IE8 и ранее

filter:Alpha(opacity=0); 

Демонстрация непрозрачности от W3Schools

Винод
источник
6
Сайт, на который вы ссылаетесь ... ужасен.
Джон Дворжак
1
@TheWandererr Я начну со страницы, на которую указывает ссылка. Имейте в виду, что он должен демонстрировать примерный код. И все же ... Вмятин нет. Обратите внимание, что они используют тип документа HTML5, что означает, что они либо обновили страницу после того, как на нее была сделана ссылка, либо они использовали HTML5 за полгода до того, как она была даже в состоянии рекомендации кандидата. Далее: Встроенный CSS плох для кеширования и читабельности. Они вроде бы должны использовать его здесь, потому что у них есть только одна панель для всего источника страницы, но если они использовали несколько панелей, как это делает jsfiddle (2010). И даже для страницы, демонстрирующей непрозрачность,
Джон Дворжак
1
@TheWandererr они могли бы сделать лучше. Показывая эффект на вложенных элементах или позволяя, например, отключить его при наведении курсора. Затем есть вся эта штука «притворяться консорциумом w3, и когда вас узнают, запустите еще один или два рескина, также помеченных как w3something» - вроде как нечестно, если вы спросите меня. Они также говорят, что их примеры могут быть «упрощены для удобочитаемости» и «постоянно пересматриваются», но удаление пробелов не улучшает читаемость, и поддержка IE7 тоже не совсем новая тенденция. Кроме того, кто бы не стал платить 100 долларов за лист бумаги, который подрывает их авторитет?
Джон Дворжак
1
@TheWandererr IIRC, раньше у них был предварительный просмотр теста. Вопросы были смесью мелочей и мелочей начального уровня. Возможно, они тоже дали несколько неправильных ответов. Что касается части непрозрачности в их руководстве по CSS: три заголовка, посвященные прозрачности изображений, - они изменяют только селектор CSS. Затем еще два абзаца - один для представления RGBA (наконец, только фон прозрачен) и один в качестве «примера интеграции» (ура! Кроме того, без отступов). Тогда ... вот и все. Больше ничего о непрозрачности. И нет, темы о "повышенной непрозрачности" позже тоже не будет.
Джон Дворжак
1
@TheWandererr, давайте поговорим о Javascript: все их примеры включают: отсутствие отступов (даже в коде Javascript); innerHTML =(эй, по крайней мере, это лучше, чем предупреждения, которые document.writeони использовали в 2012 году, но до сих пор нет манипуляций с DOM, за исключением учебника jQuery, за исключением небольшого учебника, в котором перечислены соответствующие методы по одному на главу, и даже тогда это просто выбор - и да, список есть document.write). В их руководстве по XHR используется readyStateChange вместо onLoad (поддерживается начиная с IE7). О, и их обходной путь для функций в JSON? Стренить их для оценки позже
Джон Дворжак
2

Да, вы можете просто текст как

.someDive{
    background:transparent 
}
Эмин Адилоглу
источник