I am working on this project to clone an old BBC webpage, I need to use the BBC logo, after searching on google and still couldn't find a match. I decided to inspect the page and check for the source of the image. I found the image to my surprise it's black or some sort of grey and not white as its shown on the page. I don't get how it was done. I know I can just crop it and use it but I'll like to know how it was done.
The image you are referring to is actually hidden (opacity: 0), the image you can see is a part of the sprite as Bogdan commented.
Related
i am creating a Rock Paper Scissors game for The Odin Project.What i want to do is: instead of click buttons to do the choice, i want to put circular pictures of Rock/Paper/Scissors and click these to make the choice.
I found some pictures online, so i was trying to find a way to crop them in a circular way, and the background to be transparent.
I found online that a tool to do this, is GIMP. I did everything correctly there, the picture has this gray-grid background, but still when i put the picture on the html, still is shown as a square with white background.
This is what i see in GIMP:
and this is what i get on HTML:
.
I am doing everything correctly on GIMP and also i am exporting the picture to .png .
Any help would be highly appreciated
in GIMP, i added an Alpha channel, i did the crop, the background was transparent there, i exported the file as a .png (clicked "Do not save background colour), and still the picture doesn't appear transparent
I am trying to test things out lately with Sikuli and the use of an Image with a Transparant background.
For example with the Sikuli IDE we define:
Image_FireFox = ("FireFox.png")
Now I took that "FireFox.png" and I have adjusted it with Paint.NET to make the background transparant. And then I save it again to "FireFox.png", and I put the new .png in the map of where Sikuli orginaly placed it.
When I open the IDE again, that image appears to have a black background (and not transparant). And also the image is not recognized anymore by my Sikuli Script. If I open the image in Windows Viewer, the background is still transparant.
The idea behind it is to make the image better recognized, and then my script would not care if the background of the FireFox icon is white, red or whatever colour.
Does anyone know if there is a way that Sikuli can deal with images with a transparant background? So that finding an icon on the desktop goes better, and the background wouldn't matter anymore.
Sikuli (or should I say OpenCV core that's being used by it), does not care about the background of the image itself. What it does is just to scan the whole screen as it is, exactly as it appears to you. It is not aware of types of images or anything else, just pure visual appearance. Saying that, if your image remains unchanged since when you first created the pattern and you can uniquely detect it on the screen, that will work.
As far as I understand, this quite the opposite of what you're trying to do. Do not try to change the image background because if you do, everything that will become visible behind this image (due to transparency) will prevent Sikuli from detecting it rather than helping it. Keep in mind that Sikuli only deals with rectangular patterns, so anything which is other than rectangular image won't work.
In regards to the way it looks in IDE, I'm not sure. That might be as a result of not supporting images with transparent alpha channel. You can try and ask this question on Sikuli official forum here.
its time to add an updated answer.
as of the current state sikuli has been replaced with sikulix. and sikulix can now deal with transparent or even masked images quiet well.
see here link
My web page has a background image, and a transparent gif overlaid with hotspots linking to social networks, etc.
Is there a way of transporting those coordinates so they work without the gif and just hover over the background image? When I remove the gif it obviously removes the hotspots and I cant work out how to change this (or if this is possible).
I'd like to do this when the page is loading. Right now I get a little icon before the gif appears and it looks unprofessional.
I'm using dreamweaver.
You can try some CSS tricks. Create transparent DIVs and position them above your background image where you need them.
Here is an example: http://www.position-relative.com/tutorials/tute1_css_bg_image.php
i have images and i want to remove 2 angles of each image.
The removed part should be transparent, and this is the part i couldn't fix.
Here are 2 images the shows what i want to do:
This is an empty image. The white color is the part i want to show. The Blue part is showing the document background gradient color.
This is what should i get at the end. The blue part again, is transparent from document gradient color.
Anyone has idea?
In webkit browsers you can use mask-box-image. Put your image in a div with the image-mask class and then use mask-box-image with a transparent png
.image-mask {
-webkit-mask-box-image: url(your_mask.png);
}
There is an excellent article on the always brillient CSS Tricks website - http://css-tricks.com/webkit-image-wipes/
It's webkit only though I'm afraid.
Some may not like my non-code answer, but you could do it in the image itself? Please don't hate me for suggesting this, but sometimes code doesn't solve all.
Save the image as a PNG.
Make sure the layer you are working on is not the "background" layer, if you are in Photoshop.
Erase/use the marquis tool to delete the part of the image you want to be transparent. You can blur the edges of the marquis tool to make it "fade."
Depending on your settings in Photoshop or other editing program, the "transparent" section should be a checkered grey and white.
Save the image as a PNG and use it instead of the coded mask.
Granted, this doesn't work if you are dynamically loading images or have some other reason you are relying on code to mask your image, but it should work. Early versions of IE have some issues with PNGs, but I've not encountered it with IE9, IE8 or IE7 in my current project.
How do I make the background in an image transparent? Most of my images have a white background. When I use them in my website with my body background color black it looks awkward.
I have unsuccessfully tried using Fireworks magic wand tool to remove the white background. I have also applied the CSS transparent property but it does not work for me either.
What is the best means of making the background color of an image transparent?
What image format you should use
You should use PNG pictures with alpha channel, so called RGBA image.
Save your work as PNG and make sure it is saved with RGBA colors.
Wikipedia.org, Portable Network Graphics
How to, using GIMP (should be similar with photoshop)
Open your picture file with GIMP.
If your picture layer does not contain alpha channel add it by right clicking on layer and selecting "Add Alpha Channel".
Use "Fuzzy Select", "Select By Color" or "Scissors Select" tool to select backround area.
Hit delete.
Save results as PNG format with RGBA colors.
It should look something like this after you're done with it:
Few notes
Play around with mentioned selection tools to learn which one to use in which situation.
Also pay attention to tool settings especially with fuzzy and color selection tools.
If your picture contains blurred transitions between subject and backround, you should try to make them so with final picture too. You could use
You'll want to alter the actual image to make it transparent -- sounds like it might not be? Often images themselves have white backgrounds, so laying these on top of anything might look odd. You can take the image and remove the white in it and save it as a transparent image, then try again.
Use photoshop to remove the background and save it as .png
remove it like this: http://www.addictivetips.com/windows-tips/how-to-remove-image-background-in-photoshop-tutorial/
or using magic eraser.
good luck!
You can do it in photoshop with background eraser tool
If you don't have Photoshop - the easiest way to do it is with MS Word (2010).
Change a background of your page to black (Page Layout --> Page Color --> Set to the color of your website)
Insert --> Picture
Once your have inserted pickture, go to Picture Tools and find Background Removal tool under Picture Tools.
Select area you want to remove and click "Remove" and then "Done"
use photoshop , select unwanted portion of image and then save it as png, But it'll may not work in IE, Use PNG Fix More details http://jquery.andreaseberhard.de/pngFix/
To remove the background of the images, you can use This Website. It is very easy.
Steps:
Go to the link
Select the photo or enter the URL
Download the image.