Як зробити напівпрозорий фон?

179

Мені потрібно зробити білий фон 50% прозорим, не зачіпаючи нічого іншого. Як це зробити?

css

ось посилання на статтю, яка описує спосіб реалізації прозорості за допомогою CSS. domedia.org/oveklykken/css-transparency.php Остерігайтеся, хоча здається, що підтримка крос-браузера може бути проблемою, яка може призвести до зміни вашої реалізації.

— Bnjmn

3

Ви маєте на увазі, як встановити непрозорість на фон div, не впливаючи на вкладені елементи?

— Бен

Можливий дублікат Як я можу надати тексту чи зображенню прозорий фон за допомогою CSS?

— danicotra

Див: stackoverflow.com/questions/806000 / ...

— danicotra

318

Використання rgba():

.transparent {
  background-color: rgba(255,255,255,0.5);
}

Це дасть вам непрозорість на 50%, тоді як вміст коробки буде мати 100% непрозорість.

Якщо ви користуєтесь opacity:0.5, вміст буде зів’ялим, а також фоном. Тому не використовуйте його.

— Тарун
джерело

3

так, IE підтримує rgba, його синтаксис - #ARGB і записується як фільтр: progid: DXImageTransform.Microsoft.gradient (startColorstr = # AARRGGBBAA, endColorstr = # AARRGGBBAA); в основному це градієнт статичного кольору, але з прозорістю.

— Тарун

Змінити background:наbackground-color:

— Габріелізало

background-colorне правильніше, ніж background.

— Шон

@Sean Це тоді більш конкретний і розкриває наміри? Особисто я вважаю за краще використовувати його в цьому випадку, але чи є причина, яка не є гарною перевагою?

— Дейв Слуцкін

1

@DaveSlutzkin Це прекрасна перевага, і в цьому немає нічого поганого, але зміни не слід робити на основі особистих уподобань. Інакше питання будуть постійно коливатися між різними версіями, оскільки люди з протилежними уподобаннями стикаються з ними.

— Шон

12

Це працює, але всі діти елемента з цього класу також стануть прозорими, без жодного способу цього запобігти.

.css-class-name {
    opacity:0.8;
}

— umesh patak
джерело

9

Якщо ви хочете, щоб прозорий фон був сірим, будь ласка, спробуйте:

   .transparent{
       background:rgba(1,1,1,0.5);
   }

— ThomasDuc
джерело

3

Добре знати

Деякі веб-браузери мають труднощі передати текст тінями поверх прозорого фону. Тоді ви можете використовувати напівпрозоре зображення 1х1 PNG як фон.

Примітка

Пам'ятайте, що IE6 не підтримує файли PNG.

— Йоакім Ніц
джерело

2

IE6 підтримує PNG, навіть прозорі: filter: progid: DXImageTransform.Microsoft.AlphaImageLoader (увімкнено = вірно, sizingMethod = scale, src = '/ filename.png');

— manmal

@manmal, але куди ви покладете виправлення IE? Безпосередньо у файлі .css сайту?

— Талатта

1

@Thalatta так, просто спробуйте.

— manmal

3

НЕ використовуйте 1x1 напівпрозорий PNG. Розміріть PNG до 10x10, 100x100 тощо. Що б не мало сенсу на вашій сторінці. (Я використовував PNG розміром 200x200 і він був лише 0,25 кбіт, тому немає жодної турботи щодо розміру файлу тут.)

Після відвідування цієї публікації я створив свою веб-сторінку з 3, 1х1 PNG з різною прозорістю.

Dreamweaver CS5 загартував. У мене були спалахи до DOS !!! Мабуть, будь-коли, коли я намагався прокручувати, вставляти текст, в основному робити все, що завгодно, DW намагався перезавантажити напівпрозорі області 1х1 пікселя за один раз ... YIKES!

Технологічна підтримка Adobe навіть не знала, в чому проблема, але сказала мені відновити файл (він, до речі, працював на їхніх системах). Лише коли я завантажив перший прозорий PNG у файл css, док знову заглибився.

Тоді я знайшов допис на іншому довідковому веб-сайті про те, що PNG збиває Dreamweaver. Розмір вашого PNG; Немає недоліків у цьому.

— Windows Warrior
джерело

13

Налаштування PNG просто тому, що ваш інструмент настільки хитрий, що він не підтримує його? Дійсно ...

— jurchiks

0

Хоча датовано, жодна відповідь на цю тему не може бути використана універсально. Використання rgba для створення прозорих кольорових масок - це не точно пояснює, як це зробити з фоновими зображеннями.

Моє рішення працює для фонових зображень або кольорових фонів.

#parent {
    font-family: 'Open Sans Condensed', sans-serif;
    font-size: 19px;
    text-transform: uppercase;
    border-radius: 50%;
    margin: 20px auto;
    width: 125px;
    height: 125px;
    background-color: #476172;
    background-image: url('https://unsplash.it/200/300/?random');
    line-height: 29px;
    text-align:center;
}

#content {
    color: white;
    height: 125px !important;
    width: 125px !important;
    display: table-cell;
    border-radius: 50%;
    vertical-align: middle;
    background: rgba(0,0,0, .3);
}

<h1 id="parent"><a href="" id="content" title="content" rel="home">Example</a></h1>

Розгорніть фрагмент

— Брюс
джерело

0

div.main{
     width:100%;
     height:550px;
     background: url('https://images.unsplash.com/photo-1503135935062-
     b7d1f5a0690f?ixlib=rb-enter code here0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=cf4d0c234ecaecd14f51a2343cc89b6c&dpr=1&auto=format&fit=crop&w=376&h=564&q=60&cs=tinysrgb') no-repeat;
     background-position:center;
     background-size:cover 
}
 div.main>div{
     width:100px;
     height:320px;
     background:transparent;
     background-attachment:fixed;
     border-top:25px solid orange;
     border-left:120px solid orange;
     border-bottom:25px solid orange;
     border-right:10px solid orange;
     margin-left:150px 
}

введіть тут опис зображення

— Абхі Шарма
джерело

Дякуємо за цей фрагмент коду, який може надати деяку обмежену та негайну допомогу. Належне пояснення було б значно поліпшити свою довгострокову цінність , показуючи , чому це хороше рішення проблеми, і зробить його більш корисним для читачів майбутніх з іншими подібними питаннями. Будь ласка, відредагуйте свою відповідь, щоб додати пояснення, включаючи зроблені вами припущення.

— iBug

-2

Спробуйте це:

.transparent
{ 
  opacity:.50;
  -moz-opacity:.50; 
  filter:alpha(opacity=50); 
}

— Чанду
джерело

12

це також зробить вміст непрозорим.

— Тарун

Це легко виправити за допомогою css: .transparent * { opacity:1; }якщо, наприклад, елемент transparentкласу не має внутрішнього html

— Тім Кук,