Title: Opacity, transparent, customized css
Last modified: March 8, 2022

---

# Opacity, transparent, customized css

 *  Resolved [lisia](https://wordpress.org/support/users/lisia/)
 * (@lisia)
 * [4 years, 3 months ago](https://wordpress.org/support/topic/opacity-transparent-customized-css/)
 * Hello!
 * Thank you for this great plugin It is working fine even in the free version. 
   I like the adjustments, which can be done.
    But I also would like opacitiy for
   the background – it is not possible in the setting. I tried with customized css:
 *     ```
       .df-container {
       background-color: currentColor;
       background-color: transparent;}
       ```
   
 * I tried:
 *     ```
       .df-container {
       background-color: rgba(0, 0, 0, 0.4);}
       ```
   
 * It didn’t work.
    Searching around I found your code:
 *     ```
       .df-container {
           background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
       }
       ```
   
 * This one works, but I want just a transparent plane colour.
 * It would be great, if you can help me.
    Best regards, lisia

Viewing 6 replies - 1 through 6 (of 6 total)

 *  Plugin Author [DearHive](https://wordpress.org/support/users/dearhive/)
 * (@dearhive)
 * [4 years, 3 months ago](https://wordpress.org/support/topic/opacity-transparent-customized-css/#post-15438618)
 * Hi,
 * Are you trying this on embedded flipbook or popup flipbook.
 * Just add `!important` to force you edit.
 *     ```
       .df-container {
           background-color: transparent !important;
       }
       ```
   
 * If it’s popup:
 *     ```
       .df-lightbox-wrapper {
           background-color: transparent;
       }
   
       .df-lightbox-wrapper .df-container {
           background-color: transparent !important;
       }
       ```
   
 * In popup a rgba value might be better.
 * Best Regards,
    DearHive
 *  Thread Starter [lisia](https://wordpress.org/support/users/lisia/)
 * (@lisia)
 * [4 years, 3 months ago](https://wordpress.org/support/topic/opacity-transparent-customized-css/#post-15439139)
 * Thanks a lot. Both codes work fine, when I substitute transparent with a rgba
   value.
    Great! Tomorrow I have to try an interactive pdf with a video – I’m curious
   if this works. Best regards, lisia
    -  This reply was modified 4 years, 3 months ago by [lisia](https://wordpress.org/support/users/lisia/).
 *  Thread Starter [lisia](https://wordpress.org/support/users/lisia/)
 * (@lisia)
 * [4 years, 3 months ago](https://wordpress.org/support/topic/opacity-transparent-customized-css/#post-15440541)
 * Oh sorry, the code
 *     ```
       .df-lightbox-wrapper {
           background-color: rgba(84, 176, 186, 0.7);
       }
       ```
   
 * isn’t working for full-sreen-view, only working in the embedded view.
 * Is there a solution?
    Best regards, lisia
 *  Plugin Author [DearHive](https://wordpress.org/support/users/dearhive/)
 * (@dearhive)
 * [4 years, 3 months ago](https://wordpress.org/support/topic/opacity-transparent-customized-css/#post-15450229)
 * Hi,
 * Did you add tis too:
 * .df-lightbox-wrapper .df-container {
    background-color: transparent !important;}
 * Please share the link to your page, we will check what’s going on.
 * Best Regards,
    DearHive
 *  Thread Starter [lisia](https://wordpress.org/support/users/lisia/)
 * (@lisia)
 * [4 years, 3 months ago](https://wordpress.org/support/topic/opacity-transparent-customized-css/#post-15451955)
 * Hello!
 * My code in additional css is:
 *     ```
       .df-container {
           background-color: rgba(217, 0, 48, 0.3) !important;
       }
       .df-lightbox-wrapper {
           background-color: rgba(217, 0, 48, 0.3) !important;
       }
   
       .df-lightbox-wrapper .df-container {
           background-color: rgba(217, 0, 48, 0.3) !important;
       }
       ```
   
 * The site is: [https://internettes.at/fotografie/](https://internettes.at/fotografie/)
 * The problem is: in **full view**, there is no background opacity – neither in
   the embedded mode nor in the thumb mode
 * Maybe, there is a solution, but I like dearflip anywhy.
    Best regards, lisia
    -  This reply was modified 4 years, 3 months ago by [lisia](https://wordpress.org/support/users/lisia/).
    -  This reply was modified 4 years, 3 months ago by [lisia](https://wordpress.org/support/users/lisia/).
 *  Plugin Author [DearHive](https://wordpress.org/support/users/dearhive/)
 * (@dearhive)
 * [4 years, 2 months ago](https://wordpress.org/support/topic/opacity-transparent-customized-css/#post-15463008)
 * Hi,
 * Fullscreen doesn’t take the page background and displays on top of a black screen.
   
   A background color with opacity will look darker there:
 *     ```
       .df-container.df-fullscreen {
           background-color: red !important;
       }
       ```
   

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Opacity, transparent, customized css’ is closed to new replies.

 * ![](https://ps.w.org/3d-flipbook-dflip-lite/assets/icon-128x128.gif?rev=3175518)
 * [DearFlip - PDF Flipbook, 3D Flipbook, PDF embed, PDF viewer](https://wordpress.org/plugins/3d-flipbook-dflip-lite/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/3d-flipbook-dflip-lite/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/3d-flipbook-dflip-lite/)
 * [Active Topics](https://wordpress.org/support/plugin/3d-flipbook-dflip-lite/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/3d-flipbook-dflip-lite/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/3d-flipbook-dflip-lite/reviews/)

 * 6 replies
 * 2 participants
 * Last reply from: [DearHive](https://wordpress.org/support/users/dearhive/)
 * Last activity: [4 years, 2 months ago](https://wordpress.org/support/topic/opacity-transparent-customized-css/#post-15463008)
 * Status: resolved