css tint get less

Question

Я пытаюсь создать кнопку из изображения и затемнить изображение. Что я попытался было это:

.tinted-образ {

width: 300px; 
    height: 200px; 

    background: 
    /* top, transparent red */ 
    linear-gradient(
    rgba(255, 0, 0, 0.45), 
    rgba(255, 0, 0, 0.45) 
    ), 
    /* bottom, image */ 
    url(facebook-icon.png); 

    background-size: 10% auto; 

    background-repeat: repeat; 


} 

это работает, но это сделать многие копии, изображения. Итак, я поставил:

background-repeat: no-repeat;

теперь он работает ... но область оттенка не больше 300x200. Пожалуйста, помогите мне сохранить размер оттенка и уменьшайте размер изображения

Answer 1

Для изменения размера фонового изображения вы должны попробовать background-size. Используя его, вы можете указать, как масштабировать фоновое изображение.

То, что вы, вероятно, нужно:

background-image: url(...) center; 
background-size: cover; 

Вот хорошая иллюстрация взята из w3.org сайта:

Наиболее интересны convain и cover. Разница заключается в следующем:

• contain - подходит для изображения полностью в ваш элемент;
• cover - изменяет размер изображения, чтобы полностью покрыть ваш элемент.