Як зробити кольоровий фон Div прозорим у CSS


191

Я не використовую CSS3. Тому я не можу використовувати opacityабо filterатрибути. Без використання цих атрибутів , як я можу роблю background-colorпрозорі з div? Це має бути вид текстового прикладу в цьому посиланні . Тут колір фону текстового поля прозорий. Я хочу зробити те саме, але без використання вищезазначених атрибутів.


3
Ні, opacityні filterатрибути CSS 3. Чому, на вашу думку, ви не можете їх використовувати?
Pekka

Я не знаю, в моєму Eclipse Juno обидва атрибути не показані, а відповідно до W3School: Примітка: Властивість непрозорості CSS є частиною рекомендації W3C CSS3. Дивіться тут
Mistu4u

І Моє затемнення не підтримує (швидше за все) CSS3 !! :(
Mistu4u

1
Я б сказав, що ви можете ігнорувати ці повідомлення. Деякі атрибути знаходяться поза специфікаціями, але все ще використовуються в реальному світі. Комбінація opacity, filterі деякі інші атрибути , як показано тут: css-tricks.com/css-transparency-settings-for-all-broswers охоплюватиме майже кожен браузер є
Пекк

Відповіді:


140

Непрозорість дає вам прозорість або прозорість. Дивіться приклад Fiddle тут .

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";       /* IE 8 */
filter: alpha(opacity=50);  /* IE 5-7 */
-moz-opacity: 0.5;          /* Netscape */
-khtml-opacity: 0.5;        /* Safari 1.x */
opacity: 0.5;               /* Good browsers */

Примітка: це НЕ властивості CSS3

Дивіться http://css-tricks.com/snippets/css/cross-browser-opacity/


1
"Тому я не можу використовувати непрозорість або атрибути фільтру"
Jerska

4
@Jerska, але це приміщення, яке потребує розпитування. Його єдиною причиною не використовувати ці атрибути, здається, є те, що його IDE скаржиться на них
Pekka

То чи є інший спосіб досягти цього?
Mistu4u

@Subir, якщо вам потрібен інший шлях, дивіться відповідь Жерська. Але, як сказано, здається сумнівним, чому ви хочете уникати opacityв першу чергу.
Pekka

11
Плакат хотів непрозорий фон, а не непрозорий елемент. Текст у елементі також буде непрозорим за допомогою методу непрозорості. Ця відповідь недостатньо повна, щоб це забезпечити. Використання rgba з резервним PNG було б набагато краще.
Рене

352

Проблема 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


3
Також вводиться як коментар до іншої відповіді. Найприємніше було б використовувати забарвлення rgba та описаний png у цій відповіді як резервний.
Рене

2
Злості щодо простоти використання "прозорого" на атрибуті фонового кольору. Мега кудо!
tfont

12

прозорий - це за замовчуванням для фонового кольору

http://www.w3schools.com/cssref/pr_background-color.asp


Так. Відповідно до специфікації MDN щодо кольору backgorund , початкове значення кольору backgorund є прозорим, і воно не є спадковим властивістю. Отже, за замовчуванням прозоро.
Ден Крон

4

З https://developer.mozilla.org/en-US/docs/Web/CSS/background-color

Щоб встановити колір тла:

/* Hexadecimal value with color and 100% transparency*/
background-color: #11ffee00;  /* Fully transparent */

/* Special keyword values */
background-color: transparent;

/* HSL value with color and 100% transparency*/
background-color: hsla(50, 33%, 25%, 1.00);  /* 100% transparent */

/* RGB value with color and 100% transparency*/
background-color: rgba(117, 190, 218, 1.0);  /* 100% transparent */

2

Може бути трохи пізно до дискусії, але неминуче хтось наткнеться на цю посаду, як я. Я знайшов відповідь, яку я шукав, і подумав, що опублікую власну думку про це. Наступний JSfiddle включає спосіб розшарування .PNG з прозорістю. Рішення згадки Jerska про атрибут прозорості для CSS Div: http://jsfiddle.net/jyef3fqr/

HTML:

   <button id="toggle-box">toggle</button>
   <div id="box" style="display:none;" ><img src="x"></div>
   <button id="toggle-box2">toggle</button>
   <div id="box2" style="display:none;"><img src="xx"></div>
   <button id="toggle-box3">toggle</button>
   <div id="box3" style="display:none;" ><img src="xxx"></div>

CSS:

#box {
background-color: #ffffff;
height:400px;
width: 1200px;
position: absolute;
top:30px;
z-index:1;
}
#box2 {
background-color: #ffffff;
height:400px;
width: 1200px;
position: absolute;
top:30px;
z-index:2;
background-color : transparent;
      }
      #box3 {
background-color: #ffffff;
height:400px;
width: 1200px;
position: absolute;
top:30px;
z-index:2;
background-color : transparent;
      }
 body {background-color:#c0c0c0; }

JS:

$('#toggle-box').click().toggle(function() {
$('#box').animate({ width: 'show' });
}, function() {
$('#box').animate({ width: 'hide' });
});

$('#toggle-box2').click().toggle(function() {
$('#box2').animate({ width: 'show' });
}, function() {
$('#box2').animate({ width: 'hide' });
});
$('#toggle-box3').click().toggle(function() {
$('#box3').animate({ width: 'show' });
 }, function() {
$('#box3').animate({ width: 'hide' });
});

І моє оригінальне натхнення: http://jsfiddle.net/5g1zwLe3/ Я також використовував paint.net для створення прозорих PNG, а точніше PNG з прозорими BG.


0
    /*Fully Opaque*/
    .class-name {
      opacity:1.0;
    }

    /*Translucent*/
    .class-name {
      opacity:0.5;
    }

    /*Transparent*/
    .class-name {
      opacity:0;
    }

    /*or you can use a transparent rgba value like this*/
    .class-name{
      background-color: rgba(255, 242, 0, 0.7);
      }

    /*Note - Opacity value can be anything between 0 to 1;
    Eg(0.1,0.8)etc */

Будь ласка, надайте пояснення для своєї відповіді та уникайте публікації лише коду відповідей.
Saeed Zhiany
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.