- 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 <div> 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: