First, i'm sorry for my bad english, i'm french.
I would like know how can I add a texture (picture is a transparent gif), and "hide" the box to see only the texture.
Best regards
texture the box, and make the transparent parts transparent:
<a-entity material="src:linkToYourTexture;transparent:true >"
additionaly, try using .png's, not .gif's. There is a separate component for gif's tho.
transparent .png:
https://jsfiddle.net/z0fyxhv6/1/
Related
I was trying to add some transparency to a text and oddly enough I noticed it was only transparent on one side while being opaque on the other.
The expected behavior was transparent on both sides. Any idea why this happens?
Thank you.
https://aframe.io/docs/0.8.0/components/material.html#transparency-issues
With opacity, A-Frame sets three.js renderer to sortObjects: false. Transparency ordering is based on when objects are added / defined in the scene. Shuffle the order of the text in like the HTML or when they are injected and it should work.
I am applying a canvas as a texture to a plane. And it looks fine (The background is white by default) if I am displaying it within a browser itself.
But as I change to Virtual Reality Mode the background of the canvas is changing to black.
I know that i can place a white rect to have a white background, but this is not feasible due to performance issues.
Are there any other solutions to tackle this problems?
Thanks!
Try filling in the canvas as white (fillRect), or adding a background to the scene itself (<a-sky color="#FFF">). Let me know if that works, or provide a JSFiddle for us to play around.
Hi i was going through a website where they used a very unique (according to me) background. they are mixing a color with an image and using it as background. the image is like
Then they are mixing some yellow color in it & it become like this
When i went through the code they were using something like this
background: #f6b93c url(bg1.png);
but it did not work for me!
Please help me out?
That is nothing but a short hand syntax
background: #f6b93c url(bg1.png);
So the above code simply means
background-color: #f6b93c;
background-image: url(bg1.png);
For more info on background short hand syntax
Demo
a png image with transparency and bg color will do the trick,
Otherwise if it is a jpeg,
the color will fill the rest of the part(for eg:in a div), the image wont cover.
what was happening with this background: #f6b93c url(bg1.png);
fill the color #f6b93c then on the top of that place the image, so it was a %0%(for eg.) transparent image, this will end up with a mixer of both
with latest CSS3 technology, it is possible to create texured background. Check this out: http://lea.verou.me/css3patterns/#
but it still limited on so many aspect. And browser support is also not so ready.
your best bet is using small texture image and make repeat to that background. you could get some nice ready to use texture image here:
http://subtlepatterns.com
The image bg1.png does not seem to be in baseurl. You should try relative url. eg. if you have image inside 'images' folder, "images/bg1.png" should work.
I am building an App in which I had given background to my mainWindow only and all other widgets are used without any background, but when I run the app they are not 100% transparent they are somewhat translucent, is there any way to make them 100 % transparent so that only foreground can appear with no background hint.
Could you post the code you are using to get transparancy at the moment? If you say that you get "something translucent" I think that you created a tool window which is not what you really want.
A really transparent main window could be achieved by removing the title bar (give the QWidget constructor Qt::FramelessWindowHint as second parameter - WindowFlags), draw everything in the widget that should be transparent in a uncommon color (like 255,0,255) and then cut it off.
A very primitive example of cutting off parts of a QWidget:
QBitmap b(100, 100);
b.fill(Qt::black);
setMask(b);
QBitmap must be black on that pixels that shall be visible and white on that are not. In this example just the 100,100 area starting at 0,0 will be visible, the rest of your window will be invisible.
In an image like this, I want to remove the white background but keep the grayness of the dropshadow. Reomving mapping the actual image is not a problem!
This is what I enden up doing instead after lots and lots of trial and error.
Duplicate the layer with the paper in it.
Invert the new layer.
Painting the "paper-part" clear white
Using the inverted layer as a mask on the first layer.
Worked like a charm, perfect masking!
Two options that I can think of:
a) Edit the image in photoshop and make the background transparent.
b) Overlay the "white" background w/ a div overlay that has a white background.
a is the preferred option. Post a comment on this reply if you need me to do this for you.
did you make that image? Why not make the image on a transparent background?
But if you didn't make the image, I don't know if you really can unless you plan on putting it on another whitish background because the dropshadow itself is going to be a little transparent and whatever is underneath it will show through.