Применить полутоновый фильтр Дива

Question

Попытки применить полутоновый фильтр к DIV, который поверх основного фона. Удивление, если это вообще возможно с jQuery, CSS3 или HTML5. Я играл с некоторыми из новых технологий CSS3/HTML5, но не имел успеха.

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

Я работаю над ранним проектом, и мне просто интересно, не должен ли я убить эту идею. Если вы укажете меня в правильном направлении, я смогу понять это.

Answer 1

Вы не можете применить «полутоновое все позади меня» фильтра в CSS.

Если вы не возражаете против полного экрана с потерей соотношения сторон (что может быть неважно, в зависимости от вашего облачного изображения), вот техника. Он помещает div поверх фона, который составляет половину ширины, и использует background-size:200% 100%, чтобы он был таким же, как и фон. Затем мы применяем CSS3 оттенки серого и более старые версии. Затем псевдоэлемент сверху, чтобы затемнить изображение.

Протестировано и работает в: Chrome 25, Firefox, IE9 (предположим, 7, 8).

jsFiddle

.gray { 
    background:url(https://www.google.com.au/logos/2013/maria_sibylla_merians_366th_birthday_-1256008-hp.jpg); 
    width:50%; 
    height:100%; 
    background-size:200% 100%; 
    position:relative; 

    -webkit-filter: grayscale(100%); 
    -moz-filter: grayscale(100%); 
    -ms-filter: grayscale(100%); 
    -o-filter: grayscale(100%); 
    filter: url(grayscale.svg); /* Firefox 4+ */ 
    filter: gray; /* IE 6-9 */ 
} 
.gray:after { 
    display:block; 
    content:""; 
    position:absolute; 
    top:0; 
    bottom:0; 
    left:0; 
    right:0; 
    background-color:#000; 
    opacity:.7; 
} 
body { 
    margin:0; 
    background:url(https://www.google.com.au/logos/2013/maria_sibylla_merians_366th_birthday_-1256008-hp.jpg); 
    height:100%; 
    background-size:100% 100%; 
} 
html { 
    height:100%; 
} 

Answer 2

CSS упрощает предоставление «серых» или прозрачных фонов с использованием значений rgba. В качестве альтернативы вы можете использовать прозрачные изображения.

Примером здесь http://jsfiddle.net/TtSUD/

в вашем CSS применить значение RGBA к фону, как например:

#background_div{background-color:rgba(150,150,150,0.5);} 

Первые три значения для количества красного, зеленого и синего цветов, четвертый Значение - это процент непрозрачности. 1 = 100% непрозрачный, 0,5 = 50% непрозрачный/прозрачный.

Надеется, что это помогает ...

Answer 3

Вы можете использовать CSS фильтры:

#mydiv{ 
    -webkit-filter: grayscale(1); 
} 

Имейте в виде, что это работает на Chrome и Safari в данный момент.

Подробнее: http://caniuse.com/#feat=css-filters

Answer 4

Вы можете сделать фоновое изображение оттенки серого версия изображения позади него. Это должно сработать. Вам просто нужно правильно позиционировать фоны.