Как сделать div прозрачным на белом фоне?

Цвет фона моего тела: #ffffff. И у меня есть div, который мне нужен, цветной, но он должен быть прозрачным или видеть. Можно ли это сделать с помощью CSS3 или мне нужно использовать изображения для достижения этого?Как сделать div прозрачным на белом фоне?

body { 
background-color: #ffffff; 
} 
.box { 
background-color: #999999; 
    background-image: linear-gradient(to top, #999999 0%, #444444 100%) !important; 
opacity: 0.7; 
}

Update:

Если вы идете здесь: http://pinesframework.org/pnotify/#demos-simple и искать демо для Transparent успеха вы можете увидеть, как всплывающее окно выглядит видеть сквозь на белом фоне. Мне нужно сделать что-то подобное, не используя изображение, поскольку оно его использует.

источник

2013-05-08 starbucks

вы бы использовать CSS3, если вы хотите анимированный прозрачным ... Я запутался, чем ты хотеть? –

@ryansaxe div не выглядит прозрачным, потому что фон белый. Если цвет фона отличается, он будет выглядеть лучше. Поэтому я смущен, как подойти к этому. – starbucks

Так вы не ответили на свой вопрос? Чего вы пытаетесь достичь? – woz

ОБНОВЛЕНО: На ваш комментарий ниже этот вопрос представляется дубликатом CSS - Opaque text on low opacity div?.

Вы должны изменить прозрачность фона вместо элемента:

.box { 
    rgba(255,0,0,0.6); 
}

Или, так как вы используете градиент, я хотел бы использовать это:

Ultimate CSS Gradient Generator

Это будет позволяют делать полупрозрачные фоны с градиентом.

источник

2013-05-08 15:56:23 woz

Спасибо. Но он также не должен применяться к тексту. Если вы перейдете сюда: http://pinesframework.org/pnotify/#demos-simple и посмотрите демоверсию Transparent Success, вы увидите, что я пытаюсь сделать. Я хочу, чтобы подобное прозрачное изображение выглядело прозрачным на белом фоне. – starbucks

Хорошо, теперь я понимаю. Я обновил свой ответ. – woz

Похоже, вы хотите, чтобы цвет альфа-прозрачного фона. Если это так, вы можете использовать цвета RGBA, а не твердое шестнадцатеричное значение и свойство opacity. Таким образом, только фон будет иметь прозрачность, а не контент.

В вашем случае это будет:

.box { 
    background-color: rgba(255,0,0,0.7);  
}

Вы можете также указать цвет запасной для браузеров, которые не поддерживают RGBA (IE 8 и старше), или создать PNG изображение с цветом наполнит вас хотеть. Мой голос в сторону прогрессивного улучшения, а просто указать альтернативный цвет для браузеров, которые не понимают RGBA:

.box { 
    background-color: #ff4c4c; 
    background-color: rgba(255,0,0,0.7);  
}

источник

2013-05-08 16:09:12 aaronburrows

Как сделать div прозрачным на белом фоне?

ответ

Смежные вопросы