Создайте эффект матового стекла для наложения изображений на веб-фоне

Question

Я помещаю свой каркас вместе и являюсь новым дизайном, у меня проблемы с получением приятного проекта.

У меня есть фоновое изображение, которое я хочу использовать, но хочу смягчить весь эффект, нарисуя верх над изображением, похожим на очень легкий эффект матового стекла.

Может ли кто-нибудь посоветовать, как лучше всего создать слой из матового стекла или способ достижения подобного эффекта? Я подумывал о слоях, если я решил разместить несколько других элементов поверх фона, прежде чем накладывать их на матовое стекло.

Answer 1

Сначала я бы поставил div поверх этого изображения. Это может быть достигнуто, делая что-то вроде этого

<div class="box"> 
<img src="yourimage.jpg" /> 
<div class="top-layer"></div> 
</div> 



.box{ 
    position: relative; 
} 
.top-layer{ 
    position: absolute; 
    top: 0; left: 0; 
} 

Самый простой и эффективный способ, вероятно, будет создание полупрозрачные PNG, имитирующий матовое стекло с помощью GIMP или Photoshop и настройки его в качестве фона для .top слоя.

Если вы не хотите использовать другое изображение и хотите получить чистое решение css, вам следует поэкспериментировать с свойствами стиля .top-layer. Попробуйте использовать несколько фонов линейного и радиального градиентов (смесь белого, светло-голубого и прозрачного), непрозрачность и несколько теней коробок. Эти конструкции должны иметь некоторую помощь:

http://dev.opera.com/articles/view/beautiful-ui-styling-with-css3-text-shadow-box-shadow-and-border-radius/

Особенно «Определенная телефон домашний экран» и «Box 3: Они называют меня Гласс».

Answer 2

Все матовое стекло, по существу, является искажением, и обычно также добавляется немного света.

Для искажения вы можете использовать jQuery (если вы все в порядке с его запуском на стороне клиента каждый раз), например, в this jQuery example (если вы будете следовать этому коду, вы захотите иметь speed=0 и без масштабирования).