Cloudinary Cookbook recipes about Opacity

Change image opacity

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.

Original

50% opacity

Flashlight effect

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/o_50/sheep.jpg

Ruby:

cl_image_tag("sheep.jpg", :opacity=>50)

PHP:

cl_image_tag("sheep.jpg", array("opacity"=>50))

Python:

CloudinaryImage("sheep.jpg").image(opacity=50)

Node.js:

cloudinary.image("sheep.jpg", {opacity: 50})

Java:

cloudinary.url().transformation(new Transformation().opacity(50)).imageTag("sheep.jpg");

JS:

cloudinary.imageTag('sheep.jpg', {opacity: 50}).toHtml();

jQuery:

$.cloudinary.image("sheep.jpg", {opacity: 50})

React:

<Image publicId="sheep.jpg" >
  <Transformation opacity="50" />
</Image>

Vue.js:

<cld-image publicId="sheep.jpg" >
  <cld-transformation opacity="50" />
</cld-image>

Angular:

<cl-image public-id="sheep.jpg" >
  <cl-transformation opacity="50">
  </cl-transformation>
</cl-image>

.Net:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Opacity(50)).BuildImageTag("sheep.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().opacity(50)).generate("sheep.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOpacity(50)).generate("sheep.jpg")!, cloudinary: cloudinary)

by Itay Taragano Jul 19, 2015

Tags: