transparrent bg

programming web dev
1

my div backgroun is transparrent opecity 0.5 but in the div data not show
with transparrent
i want to only div bg opecity

2

The opacity property applies to everything. If you want to only affect the background, then you have to explicitly set your background to be transparent. For solid colors, you can use a format like rgba() which includes an alpha channel value. So red would be rgba(255, 0, 0, 0.5). If you have a background image, you can add transparency to that image itself (as a PNG), or you can use a separate HTML element in the HTML to represent the background and set opacity to that. There’s a trick you can do with that using the ::after pseudo element in css that prevents you from having to add that to the HTML yourself. The CSS will add one for you. Here’s an example:

div {
  width: 200px;
  height: 200px;
  display: block;
  position: relative;
}

div::after {
  content: "";
  background: url(image.jpg);
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}

source: https://css-tricks.com/snippets/css/transparent-background-images/

1 Like
3

ok i use background repeat in no use opecity