CSS фоновое изображение прозрачным

Question

Оригинал мой CSS был,

.featured .content-wrapper 
    { 
    background-color: #7ac0da; 
    background-image: -ms-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%); 
    background-image: -o-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%); 
    background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #7ac0da), color-stop(1, #a4d4e6)); 
    background-image: -webkit-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%); 

    color: #3e5667; 
    padding: 20px 40px 30px 40px; 
    } 

дисплейного Понравилось:

Затем я хотел бы добавить изображение, то CSS стал:

.featured .content-wrapper 
    { 
    background-color: #7ac0da; 
    background-image: -ms-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%); 
    background-image: -o-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%); 
    background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #7ac0da), color-stop(1, #a4d4e6)); 
    background-image: -webkit-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%); 
    background-image: url('../Images/love.png'); 
    color: #3e5667; 
    padding: 20px 40px 30px 40px; 
    } 

Я только добавлено одно изображение

background-image: url ('../ Images/love.png');

Теперь он показывает:

То, что я хочу, чтобы сделать цвет фона # 3e5667 еще видна.

Как изменить CSS?

Answer 1

Вы можете задать фоновое изображение и градиент одновременно в CSS3, как это:

background: #7ac0da; 
background-image: url('../Images/love.png'); /* fallback */ 
background-image: url('../Images/love.png'), -webkit-gradient(linear, left top, left bottom, from(#7ac0da), to(#999999)); /* Saf4+, Chrome */ 
background-image: url('../Images/love.png'), -webkit-linear-gradient(top, #7ac0da , #a4d4e6); /* Chrome 10+, Saf5.1+ */ 
background-image: url('../Images/love.png'), -moz-linear-gradient(top, #7ac0da , #a4d4e6); /* FF3.6+ */ 
background-image: url('../Images/love.png'), -ms-linear-gradient(top, #7ac0da , #a4d4e6); /* IE10 */ 
background-image: url('../Images/love.png'), -o-linear-gradient(top, #7ac0da , #a4d4e6); /* Opera 11.10+ */ 
background-image: url('../Images/love.png'), linear-gradient(top, #7ac0da , #a4d4e6); /* W3C */ 

Answer 2

Вам необходимо убедиться, что ваше изображение (love.png) имеет прозрачный фон. На данный момент он имеет темно-серый фон, и это отображается поверх синего цвета, добавленного в CSS.

Вы можете попробовать

background-repeat:no-repeat; 
background-position:center center; 

Это то, что вы имеете в виду?

Answer 3

Это просто потому, что вы переопределяете изображение bg. Я предлагаю либо создать оболочку в вашем HTML, либо использовать psudo-элемент CSS для компенсации.

.featured .content-wrapper 
{ 
    background-color: #7ac0da; 
    background-image: -ms-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%); 
    background-image: -o-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%); 
    background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #7ac0da), color-stop(1, #a4d4e6)); 
    background-image: -webkit-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%); 
    color: #3e5667; 
    padding: 20px 40px 30px 40px; 

    position:relative; 
} 

.featured .content-wrapper:after 
{ 
    content: ''; 
    position:absolute; 
    background-image: url('../Images/love.png'); 
    width:100%; 
    height:100%; 
    left:0%; 
    top:0%; 
} 

или что-то в этом роде. Обратите внимание, что это не работает во всех версиях IE и, конечно же, гарантирует, что ваш фон на вашем изображении полностью прозрачен.