Transparent div but not the contents inside it

Question

Before I begin, yes I know this question has been asked many times but I cannot get it to working anyway. I have a div which is transparent but the contents i.e. text and input fields that I dont wan't to be transparent.

Please don't link to previous answers as I followed them but without success.

Here's what my CSS code looks like:

.csmodal {
    height: 300px;
    width: 600px;
    background-color: rgba(25, 11, 36, .5);
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#7F00FF00', EndColorStr='#7F00FF00');
    float: none;
    display: inline-block;
    padding: 30px;
    margin: 200px auto;
    opacity: 0.4;
}

.cs-container {
    margin-right: auto;
    margin-left: auto;
}

#cs-headline {
    margin-bottom: 20px;
}

#cs-description {
    font-size: 14px;
    line-height: 20px;
    color: #eeee22;
}

h1 {
    margin: 10px 0;
    text-rendering: optimizelegibility;
    color: #eeee22;
}

HTML code:

<div class="cs-container">
    <div class="row">
        <div class="col-md-6 col-md-offset-3 csmodal">
            <h1 id="cs-headline">Website Launching Soon</h1>
            <div id="cs-description">
                <p style="text-align: center;">The launch of our official website is coming soon. Stay tuned!</p>
            </div>
            <form class="form-horizontal">
                <div class="form-group">
                    <div class="col-sm-10">
                        <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
                    </div>
                </div>
            </form>
        </div>
    </div> </div>

possible duplicate of [Transparent background, but not the content (text & images) inside it, in CSS only?](http://stackoverflow.com/questions/806000/transparent-background-but-not-the-content-text-images-inside-it-in-css-on) — raam86, Jan 18 '15 at 20:24
To make sure I understand you, you want the DIV to be transparent so for example the background is transparent, but want the text and images inside of it to remain non-transparent, is that correct? — ijustin, Jan 18 '15 at 20:25
@raam86 Please read before commenting.. I've already seen that answer — coding1223322, Jan 18 '15 at 20:27
Have you tried transparent background like this http://jsfiddle.net/hxc49y3u/ — raam86, Jan 18 '15 at 20:42
@raam86 I cant because my background I have a image and a background colour — coding1223322, Jan 18 '15 at 20:50
Target the image and set opacity, target the div and use rgba. — Chris Burton, Jan 18 '15 at 20:54
@raam86 sorry that worked. But all you did was change the opacity to 1. How is that possible? Can you explain? Thanks :) — coding1223322, Jan 18 '15 at 20:56
I thought you were referring to something like this: http://codepen.io/anon/pen/emWJNJ — Chris Burton, Jan 18 '15 at 21:07
@ChrisBurton Hi Chris, yes it is pretty much like this. I've already got the answer. Thanks for your help :))) — coding1223322, Jan 18 '15 at 21:09

raam86 · Accepted Answer · 2015-01-19T01:41:52.807

1

Specifying element opacity changes the opacity for the parent and all children.

Thinking in terms of functionality all we want is to be able to see the background. in that case we can apply a background color or an alpha channel like so: background-color:rgba({0 -255},{0 -255},{0 -255},[0 - 1] the last part determines opacity.

In case you want to have an image with an alpha channel you need to have a transparent asset. like so.

Use your imagination if you can position an element in absolute position and apply opacity to that and so on

edited Jan 19 '15 at 01:41

answered Jan 18 '15 at 21:04

raam86

6,785
2
31
46

Ah i see.. Thank you for your help. I will sure remember this next time :) – coding1223322 Jan 18 '15 at 21:09
@raam86: Did you miss the rgba(...)? – Fuzzyma Jan 19 '15 at 00:08

Transparent div but not the contents inside it

1 Answers1