Is it possible to replace a specified color with transparency in CSS?
We have an image with white (255,255,255) parts. I am trying to use the rgba function to convert the white parts to transparency, but it's not working.
This image lies on top of another image, a blue background. The white shows through.
.logo {
background: url("../images/MasterLogo_resized.png") no-repeat scroll center
top rgba(255, 255, 255, 0);
}
.logo {
background: url("../images/MasterLogo_resized.png") no-repeat scroll center
top rgba(255, 255, 255, 0.5);
}
You cannot change the properties of a PNG using css.
But, if your PNG is simple enough to be converted to an SVG (using a graphics program), you could use CSS to manipulate transparency and colors:
http://webdesign.tutsplus.com/articles/manipulating-svg-icons-with-simple-css--webdesign-15694
Related
On the website of Palantir.com, the color of the logo (originally black) is always the inverse of the color of the background behind it, even as the background scrolls/changes.
I'm creating a website via Wordpress and would like to have the same effect. I've tried using "mix-blend-mode: exclusion;", and while similar, doesn't give the true effect of a proper color inverse.
How can I do this in CSS? Thanks!
mix-blend-mode: difference with the font color set at white might help.
The difference with white on white is 0 - ie black.
The difference with white on blue is rgb(255, 255, 0) ie yellow.
body {
background-image: linear-gradient(white 0 30px, blue 30px 100%);
width: 100vw;
height: 100vh;
}
.text {
mix-blend-mode: difference;
color: white;
font-size: 60px;
}
<body>
<div class="text">SOME TEXT</div>
</body>
There can be problems with grays though - you can end up with gray on gray so it depends a bit on what your underlying image is actually like as to whether this will be satisfactory enough. (One trick is to apply a slight shadow to the text).
i am trying to change the background colour of the following image to match the bar colour that it is on,but it doesnt do anything.
as you can see above the ball has a white background i am trying to make it the color that the bar is on.
what i tried
option1
#img{
background: linear-gradient(to bottom,#f7f7f7 0,#cfcfcf 100%) //this is the same color as the tab its on
}
option2
#img{
background-image: linear-gradient(to bottom,#f7f7f7 0,#cfcfcf 100%),url(./images/image.png);
}
option3
#img{
colour: linear-gradient(to bottom,#f7f7f7 0,#cfcfcf 100%)
}
html
<li style="background: linear-gradient(to bottom,#f7f7f7 0,#cfcfcf 100%);box-shadow: inset 0 2px 1px 0 #cfcfcf;">Ball<img id="img" src="./images/image.png" /></li>
any suggestions?
The background colour of the image element is covered up by the white pixels in the image itself.
You should edit the image file to replace the white pixels with transparent pixels.
Edit your img so it has a transparent background.
You could use the Luna Pic online editor for example
The background color of the image is obviously fixed within the image, and if you can't alter the image, you should change the li background. The background gradient of your li should be to right and already reach the second color (i.e. the background color of the image) at ca. 80% as shown below.
li {
height: 100px;
background: linear-gradient(to right, #cfcfcf 0, #f7f7f7 80%);
box-shadow: inset 0 2px 1px 0 #f7f7f7;
}
a {
float: right;
}
<li>Ball<img id="img" src="http://placehold.it/100x100/f7f7f7" /></li>
The problem is background color of the image element is in white
color.
Convert your image in transparent background.
Use GIF, PNG, BMP, TIFF, and JPEG format for image.
For online image editing Luna Pic
You can also use Photoshop or any other editor that supports transparency feature for editing image offline.
You can not change the colour of .jpg image. What you can do is You can take .png image with a transparent background with help of photoshop to match your background colour
OR
You can use font awesome icon if you are not used to with Photoshop
I have 2 .png pictures with a transparent background.
I would like to add them to my page, at the moment I use
<div class="thumbnail">
<img src="foo.png">
</div>
but when I open the page (through chrome) the background color is white, and I don't want it white, I want it to be transparent.
I would like not to use CSS, but if there is no other option so I'll do it.
Please note that, if you are not giving any colours for the background, then by default it will be white on most browsers! If you are using chrome, you can do like this:
body {
background: url("transparent1.png") transparent,
url("transparent2.png") transparent;
}
As said in the comment by KittMedia, if you are targetting new browsers, replace transparent with:
body {
background: url("transparent1.png") rgba(0, 0, 0, 0),
url("transparent2.png") rgba(0, 0, 0, 0);
}
This way, you can overlay two images and keep them transparent too. Is this what you are expecting?
I would like to know if there is a way to add transparency to text in forums.
I know of using [color=transparent] but that makes it fully transparent
Is there a proper coding to add transparency like 50% or so?
Example
[color=#FF0000] red [/color]
You can use CSS:
.transparent_text {
color: gray; /* fallback */
color: rgba(0, 0, 0, 0.5);
}
and
<div class="transparent_text">Hello</div>
or
<div style="rgba(0, 0, 0, 0.5);">World</div>
The last value is the transparency (this is semi-transparent-black). 0 for completely transparent, 1 for opaque
Example: http://jsfiddle.net/xUgYP/
I wish to create a white circle with fuzzy edges contained within a transparent div by using css gradients.
With the z-index higher than the body and absolute positioning I should be able to move this over any part of the page and "white-out" everything beneath the circle.
I have tried my favorite gradient generators, but they haven't worked.
<div id="circle"></div>
css
#circle {
width: 50px;
height: 50px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
}
Try using http://www.colorzilla.com/gradient-editor/.
Here's one I made using their tool: (Set the orientation to radial)
http://www.colorzilla.com/gradient-editor/#ffffff+24,ffffff+59&1+31,0+34;Custom
To make the edges more fuzzy, drag the second opacity stop further from the white - and vice versa.
try white background with box-shadow's inset property to create fuzzy edges. Although I don't get what fuzzy means to you. If you have a specific color in mind for the edges, I might be able to give you the code.
Used the gradient suggested by George Reith.
CSS
#white-circle {
background: radial-gradient(ellipse at center center , #FFFFFF 24%, #FFFFFF 31%, rgba(255, 255, 255, 0) 34%, rgba(255, 255, 255, 0) 71%) repeat scroll 0 0 transparent;
height: 100px;
left: 150px;
position: absolute;
top: 0;
width: 100px;
z-index: 1;
}
Here is the outcome: http://jsbin.com/avipih/1
I guess that radial gradient is an overkill for such purpose. Here's much simplier solution with better browser support: http://cdpn.io/yrJji