How to solve CSS background transparency?


Tags: html,css,css3

Problem :

all enter image description here

As you can see in images i have gradient background (this is responsive layout) and i want to display testimonials on that. the problem is, i want the transparent bg.

i have tried to use this

.transparent {
    zoom: 1;
    filter: alpha(opacity=50);
    opacity: 0.5;

}

but its shows something like this is not my solution enter image description here

How can i set testimonials bg same as in my web site bg. Can semi transparent png can sole this or any other way to solve it ?

thanks in advance...



Solution :

Try using rgba as a background. This gives you the option of background opacity. Here's a little calculator I use all the time to get hex to rgba http://hex2rgba.devoth.com/.

I'm not quite sure if I understand the question, but that's what you can use if you want semi-transparency. For full transparency, just use background: transparent. And it should work.

EDIT: I believe I understand the question more now. The reason that you were getting the result, is because you were setting the entire element to be at opacity 0.5, not just the background. If you use rgba like i suggested, you can set the background to be semi-transparent like this

background: rgba(238, 238, 238, 0.5);

    CSS Howto..

    How do we add the spot bulging effect in css? [closed]

    How to position a css radial gradient to the top left responsively?

    How to raise css rules priority for an html snippet

    How to join multiple rounded images one by one using line in css or css3

    Google Maps visual refresh - how do disable font Roboto in InfoWindow

    How to generate image background that flips with each duplication in css? [duplicate]

    In CSS, how to make the window non-scrollable when an element overflows?

    Changing my web-font in css caused a my old font-size values defined in “em” to be inaccurate. How to fix it?

    How to display data from a file on website load? [closed]

    Show 1 row on desktop and 2 rows on mobile

    How to change the images using HTML and CSS? [closed]

    How to use a backslash in css content property?

    How do I offset where my fixed nav bar takes me?

    android - How to build complex views that stretch?

    How to style JavaScript created text using CSS's @font-face

    Bootstrap table table-condensed table-hover, Top Border not showing

    How to implement multiple background-images for an id / class with the same CSS code?

    how to install bootstrap-select on server

    How to split css shape in half vertically?

    How to share common css and other resources among grails projects?

    How to style the first row of every tr group?

    How to implement CSS multi-level drop down menu with different classes?

    css how to make the button in the middle of this code [closed]

    How Do I Make Large Quotation Marks Wrap Properly Around Quotations?

    How to fit images into keeping the exact size of

    How to get a picture randomly move and turn towards the changing direction around a page? (using jQuery & css)

    What's the idea behind image sprites, how to approach it?

    How to restrict CSS animation to a certain div?

    How to shorten this placeholder-transitioning CSS selector using sass/compass?

    How can I insert text before an item with CSS?