Change the image's opacity level by setting the opacity
parameter (o
in URLs) to a value between 0
to 100
which represents the visibility percentage. Control the opacity level of either the main image or overlaid images.
Here's a sample image uploaded to Cloudinary:
In order to change the opacity to 50% for example, set the opacity
parameter to 50
(o_50
in URLs):
Note that the JPG format doesn't support transparency. If you have a background color set on the webpage, the image won't be transparent and therefore the image won't blend in to the background color (a default white background color is applied for JPG images). If you require transparency, you might want to consider converting the image to a transparency-supported format, e.g., PNG:
Alternatively, tell Cloudinary to set the background color of the image. This is done by setting the background
parameter (b
in URLs) to any color instead of the default white (this parameter is only supported for JPGs):
The opacity level can be customized for overlay images too. Here's the same image with Cloudinary's logo as an overlay:
And here it is after the overlay's opacity level is customized to 50%, which results a more blended image:
Here's an example of a more advanced technique to generate a cool "flashlight" effect. Firstly we'll decrease the opacity level to 30
while setting a black background, then we'll add the same image as an overlay, cropped as a circle and applied with the vignette
effect:
Here's another nice example which combines opacity with a textured text overlay (as explained in the cookbook recipe - Use images as text textures):