Непрозрачность для картинки

[oleg126]

Подскажите пожалуйста, почему не работает прозрачность?

Смысл такой, у меня есть картинка фоновая и я хочу сделать прозрачность, но почему то не работает!?

.get_in_touch{
	background: url(../img/your_project_img.png) no-repeat top /cover;
	padding: 90px 0 40px 0;
	background-color: rgba(255,0,0,0.75); 
}

 

<section class="get_in_touch">
	<p>Do you like <span>our work</span> so far?<br>
    Let's talk about <span>your project</span>!</p>
  	<a class="button" href="#">Get in Touch</a>
</section>

.get_in_touch{
	background: url(../img/your_project_img.png) no-repeat top /cover;
	padding: 90px 0 40px 0;
	background-color: rgba(255,0,0,0.75); 
}
.get_in_touch p{
	font-size: 30px;
	font-family: Roboto Slab;
	color: #fff;
	text-align: center;
}
.get_in_touch p span{
	text-transform: uppercase;
}

Для полноты картины ...

[AlexZaw]

напрямую никак, только через фотошоп, либо почитайте вот тут http://questionbig.ru/665/как-установить-прозрачность-фоновой-картинки-в-css

[oleg126]

Так а если у меня к примеру есть вот такая ситуация:

Видно, что на макете при наведении на картинку, картинка сама заливается полупрозрачным цветом. Как поступить тогда в таком случае? Рисовать те же самые картинки с затемнением и при наведении на нее менять ее через :hover? Помоему так не правильно!? Или вообще можно было делать это как то по другому? Не через img?

[andrey7287]

38 минут назад, oleg126 сказал:

Как поступить тогда в таком случае?

ещё один слой поверх картинки. В интернете полно сайтов с таким эффектом, открой и посмотри как это делается.

[Igor Schnaider]

Еще вариант:

.get_in_touch{
  background:
    linear-gradient(rgba(250, 0, 0, .75), rgba(250, 0, 0, .75)),
    url(../img/your_project_img.png)
    no-repeat top /cover; 
}

 

p.s. C ховером, конечно, отдельным слоем делать.