[HTML][CSS] How to change opacity of background-image but not the text on it? -


i want create square background image , text on , manipulate background image's opacity.

the problem when applying opacity value, changes text. tried put 2 sections inside square, tried change opacity of background image , set opacity of text 1 doesn't work.

html:

<section>   <p>test</p> </section>

css:

section {   height: 200px;   width: 300px;   background-image: url(graphic/background.jpg);   opacity: 0.5; }  section p {   color: white;   opacity: 1; }

use following css solve issue:

give image url section after or before. , give opacity that. so, not effect text.

section {  width: 200px;    height: 200px;    display: block;    position: relative;}    section:after{      content: "";    background: url(http://video-js.zencoder.com/oceans-clip.png);    opacity: 0.5;    top: 0;    left: 0;    bottom: 0;    right: 0;    position: absolute;    z-index: -1;     }  }    section p {      opacity: 1;}
<body>            <section>              <p>test</p>          </section>    </body>

check fiddle.


-

Popular posts from this blog