Menu
In my project, I'm trying to create an ambient lighting feel. I handle images via client side coding and I need to adjust brightness of several images. I know there are libraries such as Pixastic, but I want a solution which applies directly into HTML code(like tags) rather than Image objects in JS. Are there any Javascript or CSS based way to do it?
667
To set image brightness in CSS, use filter brightness(%). Remember, the value 0 makes the image black, 100% is for original image and default. Rest, you can set any value of your choice, but values above 100% would make the image brighter.
Parameters. The brightness of the result, specified as a <number> or a <percentage> . A value under 100% darkens the image, while a value over 100% brightens it. A value of 0% will create an image that is completely black, while a value of 100% leaves the input unchanged.
CSS has a filter property that can be used with a variety of filter functions. One of them is the brightness() filter. By feeding a percentage less than 100% to brightness() , the target element will be made darker. Inversely, feeding a percentage greater than 100% to brightness() will make the element brighter.
You can try playing around with CSS opacity to see if that suits your needs.
img {
opacity: 0.8; /* good browsers */
filter: alpha(opacity=80); /* ye 'old IE */
}
As Blender suggests, the <canvas> tag is what you want for gamma manipulation, which is a non-linear per-pixel transformation.
34
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
