I used icon directly in html as below:
<div class="tabbertab" title='<img height="20" width="20" src="<%=contextPath%>/images/icons/bicycle.png"> Bicycle</img>'>
So the icon image got placed besides Bicycle text.
The text is a part of Tab. Which on selection changes color (white to light blue and vice versa).
The background of the icon also reflects this as icon is having a transparent background. And as you can see, I resized the image according to the place where it is going to be displayed.
However, now I got the requirement to use the icon inside javascript code as below:
iconFile = siteroot + '/images/icons/bicycle.png';
anchor.style.backgroundImage = 'url(' + iconFile + ')';
anchor.style.backgroundRepeat = 'no-repeat';
anchor.style.backgroundPosition = '1px 2px';
where siteroot is the path to the root of the application.
Since here I am directly using the icon file in the size it is available. I resized the icon image using mspaint to 20 by 20 pixel.
However, now the icon image seems to be in a white box (and not transparent) of 20 by 20 and so the icon background color is not changing as per the background of the tab it is in.
Are there any good open source tools to resize icon images without losing transparency. I am not having access to photoshop.
The reason you can see the background in the original one is because the icon file has a transparent background.
You say you resized the icon to 20x20 - I am guessing whatever program you used to do this lost the png transparency that was on the original .png file, and turned the background white.
Try using the non-resized image instead (even if it looks wrong) to verify this is correct, then use a css resizing solution or a better program to resize the icon that won't lose the transparency information.
Related
I'm trying to get the background color which is linear gradient from this template but it appear as background image , any help please?
In Figma, images are actually a type of shape fill. Like colors or gradients.
In the template you linked, you can replace the gradient background with a different one, like a photo background.
This technique won't create a separate layer for the image. Instead, it's a fill for the parent frame.
Steps:
On that file, go a blank area and then insert the photo/picture that you actually want as the new background image for the webpage design.
Select the photo/picture.
On the fill panel, click leftmost part of the Image fill to select it. Then press CTRL+C to copy it.
Select the background frame that has the gradient.
On the Fill Panel, delete the Image. Because the gradient design is actually a pasted image.
With the background frame still selected, press CTRL+V.
enter image description herePer this page (https://www.highcharts.com/docs/maps/custom-maps) I open inkscape, insert an image I want to draw over and then click on "resize page to selected object" with the image selected. This resizes the page to the size of my background image. I then create the shapes over the image as instructed in the page referenced above. What I want to do is when I paste the svg into the highcharts converter it keeps the shapes as drawn on the page so that I can then insert that same picture into the background of my highchart map on the page and the shapes I have drawn fit perfectly where I drew them on the image in inkscape. Instead it seems like the converter resizes the shapes to best fit the screen. If I didn't want the background image then this would be perfect however with this feature all the images drawn no longer "fit" in the background image where I drew them. Any way to get this to be a 1:1 size conversion so that inserting a background image works?
I have a Skin for SkinnableContainer.
Skin contains only the original contentGroup and s:BitmapImage as background.
Background image stretchers out according to width and height content.
The used image is .png with transparent regions.
To create hitarea, I used this algorithm:
http://www.webverwirklichung.com/en/blog/programming/flex/creating-hitarea-png-image-transparent-alpha-regions-flex
Everything's working fine until I start to stretch the SkinnableContainer (along with the image in the skin).
I have a scale9Grid for the image.
The problem is, that when stretching the image, the bitmapData of the image is still the same (same width and height). Therefore I need to somehow obtain the bitmapData of the image for the scale9Grid application.
The background of the component is an image, which has some transparent areas. It is only possible to click on the visible part of the image. The image will stretch according to the content in contentGroup.
Need an advice, please.
How about using the BitmapData.draw() method?
After the container is resized and the 9 slice scaling has been applied (or whatever the appropriate trigger is) do:
var b:BitmapData = new BitmapData(container.width, container.height);
b.draw(container);
Then use this new bitmap with the algorithm that creates the hit area.
in my app i have a background image and need to place an image button at the specified location of the background image.i did by using frame layout with android:layout_gravity,layout_alignBottom and marginLeft and right properties. please refer image no :1
i set it for one emulator and it works but i get wrong when launch other emulator of different size so how to set image view over a background image so that imageview not changes its position for any size of screen.
Is there any possibilities to trigger action find by touching image button on the screen(both background image and image button combined as single image - please refer Image no 2)
For this kind of problem, I would think that the best solution in order not to have problem with the screen sizes/densities would be to have different images for the play phase, stop etc.
Thus having:
microphone with play button: 1 image
microphone with stop button: 1 image
microphone with play selected button: 1 image
Etc. and handling the user events.
Hope this helps!
I am now writing a image viewer, It is used for view thumbnails.
As it is ugly, I decide to draw shadow round thumbnail.
There is background color.
I am using StretchDIBits to draw a shadow image at the location of thumbnail.
However it is really annoying that it cover the background color...
When the background is white, it looks perfect.
but if the backgound is not white, it has a white border.
so I make use of AlphaBlend, first draw the shadow image onto a DC, then use AlphaBlend onto the background. However, I can still see the white border.
Is there any why to generate a perfect shadow , no matter what background is.
Are you sure the shadow bitmap contains alpha values for the alpha channel ? I.o.w.: how are you creating the shadow bitmap: are you doing that by blurring a square on a transparent target or a white target? If the first, the shadow bitmap contains an alpha channel and should blend fine with the background. if the second, your shadow bitmap contains white fragments and thus will blend that white with the background.