CSS背景图片透明

Question

Original my CSS was,

  .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;
   }

The displaying likes:

Then I wanted to add an image, the CSS became:

   .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;
   }

I only added one image

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

Now it shows:

What I want is to make the background color #3e5667 is still visible.

How to modify the CSS?

Answer 1

You can define a background image and a gradient simultaneously in CSS3 like this:

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

You need to make sure your image (love.png) has a transparent background. At the moment it has a dark grey background and that's being shown over the top of the blue one you've added in CSS.

You could try

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

Is that what you mean?

Answer 3

It's just because you are overriding the bg with the image. I suggest either creating a wrapper in your HTML or using a CSS psudo-element to compensate.

.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%;
}

or something like that. Note that this doesn't work on all versions of IE and of course ensure your background on your image is fully transparent.