CODEWITHSUNDEEP
htmlcssreactjssemantic-uisemantic-ui-react
Contentop
Contentop

Reputation: 1241

Change svg image background color on html?

I am displaying images dynamically (fetching them from an API). Their background is transparent (alpha). I also have background color I for the images to be on top of on. How would I add this background color to the image on html? I have an Image React class (from Semantic-Ui-React) but ignore this. The attribute of will work the same. the "fill" and "color" here are just my attempts that didn't work. The rest of the attributes are irrelevant.

             <Image
                align="left"
                color="green"
                fill="red"
                src={image}
                size={this.state.tokenImageSize}
                avatar
                onMouseEnter={e =>
                  this.setState({
                    tokenImageSize: "medium",
                    textHeaderSize: "h1"
                  })
                }
                onMouseLeave={e =>
                  this.setState({
                    tokenImageSize: "tiny",
                    textHeaderSize: "h4"
                  })
                }
              />

Upvotes: 0

Views: 645

Answers (1)

Joundill
Joundill

Reputation: 7533

The typical way to change background colours in HTML elements is to use the style attribute, and set background-color to the colour you need.

For example, you could add to your <image/> tag this attribute:

style='background-color: blue'

Upvotes: 1

Related Questions