Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <style>
- #text_holder {
- background: blue;
- width: 500px;
- height: 200px;
- }
- #text_holder2 {
- background: blue;
- width: 500px;
- height: 200px;
- color: rgba(255, 255, 0, 1);
- }
- #alpha_30 {
- opacity: 0.3;
- color: #ff0000;
- }
- #alpha_100 {
- color: #ff0000;
- }
- </style>
- </head>
- <body>
- <div id="alpha_100">
- <div id="text_holder">
- <p>Demo text 1</p>
- </div>
- </div>
- <div id="alpha_30">
- <div id="text_holder">
- <p>Demo text 2</p>
- </div>
- </div>
- <div id="alpha_30">
- <div id="text_holder">
- <p>Demo text 3</p>
- </div>
- <div id="text_holder2">
- <p>Demo text 4</p>
- </div>
- </div>
- </body>
- </html>
- #text_holder {
- background:rgba(0, 0, 255,1);
- width: 500px;
- height: 200px;
- }
- #text_holder2 {
- background: rgba(0, 0, 255,1);;
- width: 500px;
- height: 200px;
- color: rgba(255, 255, 0, 1);
- }
- #alpha_30 > div {/* select child */
- /*opacity: 0.3;*/
- background:rgba(0, 0, 255,0.3);/* give opacity to bg color only */
- color: #ff0000;
- }
- #alpha_100 {
- color: #ff0000;
- }
- <div class="bg-img">
- <p class="text_holder"> some text</p>
- </div>
- .bg-img {
- background:url(http://lorempixel.com/100/100/abstract);
- }
- .bg-img .text_holder {
- background:rgba(255,255,255,0.3);/* here white cause body as white background */
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement