I'm developing Qt5 webview based application and I need to make a specific color inside webview be transparent or have an alpha channel.
For example, web page, loaded into webview, may have fullscreen div with a background color (black in most cases, but may be another color). I need to make this color (with webview itself) be semi-transparent. All others elements on the application form should be visible through this webview.
I think I understand your question, you want to let the WebView with the semi-opaque background (or something).
You can try to remove the background of webview, use this (source: https://gist.github.com/anonymous/103126 ):
QPalette palette = ui->webView->palette(); //Get webView palette
palette.setBrush(QPalette::Base, Qt::transparent);
ui->webView->page()->setPalette(palette); //Set transparent palette
ui->webView->setAttribute(Qt::WA_OpaquePaintEvent, false);//Remove opaque
In your css file (into html), use this:
<html>
<head>
body {
background-color: rgba(255, 0, 0, 0.2);//Edit "0.2" to obtain the opacity needed.
}
</head>
<body>
Something...
</body>
</html>
Related
I want to set background color of whole app or a single background color
but what happened if i use div , different device take different height that's why bottom side not cover up and i am unable to set ion content background.
Add below code to your app.scss file :
html, body, ion-app, ion-content, ion-page, ion-view, .nav-decor {
background-color: #yourColor !important;
}
Bro u can use in this case i have a stylesheet global with primary color variable
I'm currently creating my first PWA with Stencil, PWA Toolkit and Ionic 4.
I can not explain myself a behavior when switching from one page (ion-content) to another page.
Here the situation:
CSS 1st page (app-home):
ion-content {
--background: pink;
}
CSS 2nd page (app-data):
ion-content {
--background: white;
}
With the statement:
this.router.push ('/data', 'forward');
the app changes from page 1 to page 2. But the background remains pink and does not change as expected to white.
When I refresh the url “/data” the background becomes white. When I then return to the first page the background
remains white.
What am I doing wrong?
It works this way because there are no css scoping in Stencil by default so rule for the for ion-content selector is applied twice in your page.
You need to prepend each style with a component selector to correctly scope them.
For example:
app-home ion-content {
--background: pink;
}
Read more about styling in Stencil here
I see from https://vega.github.io/vega-lite/docs/config.html that it is possible to change the background color. But i don't see any docs for adding an underlay background image.
vega-lite creates a canvas element.
So adding a background image is explained in a question about how to add a background to a canvas element.
HTML5 Canvas background image
But you can just do it with css:
canvas {
background: url("my_background.png");
}
This is just like any other background image css.
https://developer.mozilla.org/en-US/docs/Web/CSS/background-image
I have a container in the center of window. And my logo goes out from container to the left. I split my logo in 2 pieces. Right piece i added in my container with no-repeat. And left piece i have to add in my body background and somehow stick it to containers div.
i have drawn my issue:
how to manage that issue ?
I would do it somehow different. You can always set background of #logoimage div to your logo with gradient, or simply put an image inside. One image is enough with full logo object.
style:
#container{
display:block;
width:400px;
height:800px;
margin:auto;
background:#abc;
position:relative;
}
#logoimage{
display:block;
width:170px;
height:80px;
margin:auto;
background:#aaa;
position:absolute;
left:-70px;
top:30px;
}
html:
<div id="container"><div id="logoimage"></div></div>
live example here
What's the most important of this is:
position:relative style of container element
position:absolute style of logo element
The idea generally is that in position absolute, you can set x,y relatively to element with position relative.
How i can change background color of all page?
like this :
body,div { background-color:#f4f4f4; }
Now background changes only for div with information, remaining page have white color. if it is possible, can you write example?
P.s. How i can draw border around ?
Acording to the documentacion https://github.com/chrisglass/xhtml2pdf/blob/master/doc/usage.rst#supported-page-properties-and-values #page only accept few css propierties:
background-image
size
margin, margin-bottom, margin-left, margin-right, margin-top
So maybe the easyest is to make a jpg to draw the background with background color and border. And use that image in background-image propierty:
#page {background-image: url('local_path/to/your/image.jpg')}
I hope this will help you
html,body{height:100%}
body,div { background-color:#f4f4f4; }
and your Second Question > How i can draw border around ?
add
border:1px #ccc solid