Using a transparent background in HTML/CSS content displayed using XbpHTMLStyle and XbpHTMLWindow

I Love Xbase++ (ILX)
The portal for Xbase++ developers worldwide

Till Warweg

Member
Staff member
I am here to help you!
Feb 1, 2021
38
11
8
Customer Identifier
E074775

Transparent backgrounds in HTML/CSS​

The "background-color" CSS attribute specifies the color used for drawing the background of an HTML element. This normally defaults to "transparent", causing only the content (text or graphics) to be rendered for HTML elements such as div tags or paragraphs.

However, HTML/CSS renderers typically define an implicit background color at the document-level for providing a defined backdrop against which to draw content. In most cases, this is the color white. In order to create content that is truly transparent, that is, which has the imagery of a parent control shine through in some areas, the CSS must be adjusted for overriding this default.

Example:
CSS:
<style>
   html {
     background-color:transparent;
   }
 </style>

Making the parent's imagery appear in the content area of the control​

Regardless of whether you're using an XbpHTMLStyle object for styling a static or push button or if you're using an XbpHTMLWindow object for hosting complex content, parent imagery will only be visible if you allow Windows to draw into the content area of the child control. The easiest way to do this is by making sure the parent's :clipChildren is set to .F..

Also, the background color of the child control should be set to transparent to prevent the control from clearing the background using the default background color.

Example:
Xbase++:
#include "gra.ch"
 #include "xbp.ch"

 #pragma library( "xppwui.lib" )

 PROCEDURE Main()
  LOCAL oDlg

    oDlg := XbpDialog():new( AppDesktop(), , {417,305}, {600,400}, , .F.)
    oDlg:title := "Example"
    // Define some fancy background here...
    // oDlg:drawingArea:bitmap    := 2
    oDlg:drawingArea:colorBG       := GRA_CLR_GREEN
    oDlg:drawingArea:clipChildren := .F.
    oDlg:create()

    CreateStyledStatic( oDlg:drawingArea, {10,10}, {250,50} )
    CreateHTMLWindow( oDlg:drawingArea, {10,100}, {250,100} )
  
    oDlg:showModal()
 RETURN

 FUNCTION CreateStyledStatic( oParent, aPos, aSize )
  LOCAL cCSS
  LOCAL oStyle
  LOCAL oXbp

    TEXT INTO cCSS WRAP
      <style>
        body {
          font-size: 18pt;
        }
        html {
          background-color:transparent;
        }
      </style>
    ENDTEXT

    oStyle := XbpHTMLStyle():New( cCSS )

    oXbp := XbpStatic():New( oParent,, aPos, aSize, {{XBP_PP_BGCLR, XBPSYSCLR_TRANSPARENT}} )
    oXbp:visualStyle := oStyle
    oXbp:caption     := '<div>Caption on static</div>'
    oXbp:create()
 RETURN oXbp

 FUNCTION CreateHTMLWindow( oParent, aPos, aSize )
  LOCAL cHTML
  LOCAL oXbp

    TEXT INTO cHTML WRAP
      <html>
       <head>
        <style>
          body {
             font-size: 18pt;
          }
          html {
             background-color:transparent;
          }
        </style>
       </head>
    
       <body>
          <div>This is a &lt;div&gt; in a HTML window</div>
       </body>
      </html>
    ENDTEXT

    oXbp := XbpHTMLWindow():New( oParent,, aPos, aSize, {{XBP_PP_BGCLR, XBPSYSCLR_TRANSPARENT}} )
    oXbp:HTML := cHTML
    oXbp:create()
 RETURN oXbp
 
Last edited by a moderator: