在一个背景图像上添加一个<img>本身？

Question

Is it possible to add a background-image on an <img> tag? I cannot create a <div> around it for now (due to other restraints). I'm wondering if it's possible on just the <img> tag. Thanks.

 img { width: 500px; background-image: url('https://stackoverflow.design/assets/img/logos/so/logo-stackoverflow.png'); background-repeat: no-repeat; z-index:100; }

 <img src="https://www.cieau.com/wp-content/uploads/2019/11/eau_nature.jpg">

Answer 1

Use padding and add the image there:

 img { width: 300px; padding:0 0 50px 0; background: url('https://stackoverflow.design/assets/img/logos/so/logo-stackoverflow.png') bottom right/auto 50px; background-repeat: no-repeat; }

 <img src="https://www.cieau.com/wp-content/uploads/2019/11/eau_nature.jpg">

Like below by considering multiple backgrounds and by keeping only the padding area:

 img { width: 0; height:0; padding:300px 500px 0 0; background: url('https://stackoverflow.design/assets/img/logos/so/logo-stackoverflow.png') bottom right/auto 50px, url(https://www.cieau.com/wp-content/uploads/2019/11/eau_nature.jpg) center/cover; background-repeat: no-repeat; }

 <img src="https://www.cieau.com/wp-content/uploads/2019/11/eau_nature.jpg">

Answer 2

Yes, this is possible - but the img would need some transparency for you to see the background image of course.

This snippet is the same as yours but with the actual img src removed and a width and height put on the img element so it has some dimensions, since it isn't in this case picking them up from the img itself. You can see the StackOverflow logo emerging from underneath.

 img { width: 500px; background-image: url('https://stackoverflow.design/assets/img/logos/so/logo-stackoverflow.png'); background-repeat: no-repeat; z-index:100; }

 <img src="" width=200 height=200>