-1

Could you guys please tell me how can I create a transparent layer over a product picture to be able to write the name and price of a product on sales screen of a Point of Sale software just like this my problem is the text and price on the product picture aren't visible see here

this is the screen where I write the html code, I tried this code <html><center><div style=background-color:#fafafa;color:#0;padding-left:10px;padding-right:10px;>Product name but the layer is not transparent and is not fitting the button, either it's to small or it's placement is incorrect, I wanted to be as I shared the pic above. Please let me know what can I do?

Rob
  • 14,746
  • 28
  • 47
  • 65
tamiitaly
  • 1
  • 1
  • Note that the `
    ` element has been [obsolete](https://html.spec.whatwg.org/dev/obsolete.html#obsolete) for 15 years or more.
     – Rob Mar 17 '23 at 21:45
  • Thanks for the note, I didn't write the
    , when I go to edit the button section, this code is written initially, it comes with the software written like that. Anyway, can you please help me achieve what I'm trying to do?
     – tamiitaly Mar 18 '23 at 10:17

1 Answers1

0

try setting the background-color value to background-color:rgba(245,245,245,.2); the 0 value controls the alpha of the color, so 1 is opaque and 0 is translucent :)

https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/rgb
wesley weinberg
  • 1
  • 1
  • I tried what you suggested but it's not working. What happened is that the entire background color changed to black and the 0 at the end doesn't have any effect, I tried putting other numbers but nothing is happening. What I'm trying to do is to have a layer that is transparent/with opacity so I can write description on it without hiding the entire part of the picture as it shown on the product screen of this [link](https://i.stack.imgur.com/fg3GW.png) – tamiitaly Mar 18 '23 at 10:15
  • Ok, that's my fault, it's `rgba` not `rgb`, will edit the answer. – wesley weinberg Mar 19 '23 at 11:28
  • This one worked but it only created a white layer that is not transparent/without opacity ([check it here](https://i.stack.imgur.com/vgOPi.png). I tried changing the last number (.2) to different numbers but it doesn't have any effect, you sure this is the one controlling the opacity? – tamiitaly Mar 19 '23 at 15:54