Currently we just have two levels - opaque (opacity level at 1) and transparent (opacity level at 0.7)

Relevant lines of code are:

1. an opacity option for the 0.7 value
   

   Leaflet.DistortableImage/src/edit/DistortableImage.Edit.js

   Lines 3 to 20 in c2bf3de

   	L.DistortableImage.Edit = L.Handler.extend({
   	options: {
   	opacity: 0.7,
   	outline: "1px solid red",
   	keymap: {
   	'Backspace': '_removeOverlay', // backspace windows / delete mac
   	'CapsLock': '_toggleRotate',
   	'Escape': '_deselect',
   	'd': '_toggleRotateScale',
   	'r': '_toggleRotateScale',
   	'j': '_toggleOrder',
   	'k': '_toggleOrder',
   	'l': '_toggleLock',
   	'o': '_toggleOutline',
   	's': '_toggleScale',
   	't': '_toggleTransparency',
   	}
   	},

2. The _toggleTransparency action:
   

   Leaflet.DistortableImage/src/edit/DistortableImage.Edit.js

   Lines 294 to 303 in c2bf3de

   	_toggleTransparency: function() {
   	var image = this._overlay._image,
   	opacity;
   	this._transparent = !this._transparent;
   	opacity = this._transparent ? this.options.opacity : 1;
   	L.DomUtil.setOpacity(image, opacity);
   	image.setAttribute("opacity", opacity);
   	},

3. The corresponding toolbar icon code:
   

   Leaflet.DistortableImage/src/edit/DistortableImage.EditToolbar.js

   Lines 12 to 26 in c2bf3de

   	ToggleTransparency = EditOverlayAction.extend({
   	options: {
   	toolbarIcon: {
   	html: '<i class="material-icons md-18">opacity</i>',
   	tooltip: 'Toggle Transparency'
   	}
   	},
   	addHooks: function() {
   	var editing = this._overlay.editing;
   	editing._toggleTransparency();
   	this.disable();
   	}
   	}),

It would be great to get the transparency tool to work on a range – going from opaque to increasingly more transparent.