While Philippe’s idea would work I just though it worth mentioning that support of multiple backgrounds MAY be an issue depending on the browser support you need.
On Wed, Oct 4, 2017 at 8:11 PM Philippe Wittenbergh <ph...@l-c-n.com> wrote: > > > On Oct 5, 2017, at 8:21 AM, Angela French <afre...@sbctc.edu> wrote: > > > > Is there a property of the background that will allow me to set the > opacity of an image? I have a div container that contains a few things and > I only want to change the opacity on an image that is in it. Something > like background-opacity? > > Is the image a `background-image` or inserted via the `<img />` tag ? If > it is the latter, then apply the opacity property to the image, as Tom just > pointed out. > > If it is the former - there is no such property as `background-opacity`. > However, you can eventually workaround this (assuming the background > behind the container is a flat colour). Just add another layer (a fake, > semi-transparent colour block) to your background property, **on top** of > the image layer: > > .container { > background-image: linear-gradient(hsla(0,0%,100%. .5),hsla(0,0%,100%. > .5)), url(path/to/image.jpg); > background-size: 100px,100px; > } > > Philippe > -- > Philippe Wittenbergh > https://l-c-n.com/ > > > > > > > ______________________________________________________________________ > css-discuss [css-d@css-discuss.org] > http://www.css-discuss.org/mailman/listinfo/css-d > List wiki/FAQ -- http://css-discuss.incutio.com/ > List policies -- http://css-discuss.org/policies.html > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 ______________________________________________________________________ css-discuss [css-d@css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/