Проблема opacity
полягає в тому, що це також вплине на вміст, коли часто ви не хочете, щоб це сталося.
Якщо ви просто хочете, щоб ваш елемент був прозорим, це дійсно так просто, як:
background-color: transparent;
Але якщо ви хочете, щоб воно було в кольорах, ви можете використовувати:
background-color: rgba(255, 0, 0, 0.4);
Або визначте фонове зображення ( 1px
за 1px
), збережене праворуч alpha
.
(Для цього використовуйте Gimp
, Paint.Net
або будь-яке інше програмне забезпечення зображення , яке дозволяє вам зробити це.
Просто створіть новий файл, видалити фон і покласти напівпрозорий колір в ньому, а потім зберегти його в форматі PNG.)
За словами Рене , найкраще , що потрібно зробити буде змішувати обидва з rgba
першого і 1px
по 1px
зображенню в якості запасного варіанту , якщо браузер не підтримує альфа:
background: url('img/red_transparent_background.png');
background: rgba(255, 0, 0, 0.4);
Дивіться також : http://www.w3schools.com/cssref/css_colors_legal.asp .
Демо : Мій JSFiddle
opacity
ніfilter
атрибути CSS 3. Чому, на вашу думку, ви не можете їх використовувати?