Can I set an opacity only to the background image of a div

Question

Let s say I have   lt div class  myDiv  gt Hi there lt  div gt    I want to put a background-image and give it an opacity of 0 5     but I want that the text I have written will have full opacity  1     If I would write the CSS like this   myDiv   opacity 0 5     everything will be in low opacity     and I don t want that   So my question is     How can I get low-opacity background image with full opacity text

User · Answer

css  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      html   lt div gt  put your div content lt  div gt

User · Answer

This can be done by using the different div class for the text Hi There      lt div class  myDiv  gt       lt div class  bg  gt      lt p gt  Hi there lt  p gt   lt  div gt   lt  div gt    Now you can apply the styles to the  tag  otherwise for bg class  I am sure it works fine

User · Answer

Hello to everybody I did this and it worked well   x000D   x000D   var canvas  ctx  x000D   x000D    function init     x000D     canvas   document getElementById  color    x000D     ctx   canvas getContext  2d    x000D   x000D     ctx save    x000D     ctx fillStyle     bfbfbf        00843D      118846 x000D     ctx fillRect 0  0  490  490   x000D     ctx restore    x000D      x000D  section  x000D    height  400px  x000D    background  url https   images pexels com photos 265087 pexels-photo-265087 jpeg w 1260 amp h 750 amp auto compress amp cs tinysrgb   x000D    background-repeat  no-repeat  x000D    background-position  center  x000D    background-size  cover  x000D    position  relative  x000D    x000D    x000D   x000D  canvas   x000D   width  100   x000D   height  400px  x000D   opacity  0 9  x000D   x000D    x000D   x000D   text   x000D   position  absolute  x000D   top  10   x000D   left  0  x000D   width  100   x000D   text-align  center  x000D    x000D   x000D   x000D   middle  x000D   text-align  center  x000D    x000D    x000D   x000D  section small  x000D   background-color   262626  x000D   padding  12px  x000D   color  whitesmoke  x000D    letter-spacing  1 5px  x000D   x000D    x000D   x000D  section i  x000D    color  white  x000D    background-color  grey  x000D    x000D   x000D  section h1  x000D    opacity  0 8  x000D    x000D   lt html lang  en  gt  x000D   lt head gt  x000D    lt meta charset  UTF-8  gt  x000D    lt title gt Metrics lt  title gt  x000D    lt meta name  viewport  content  width device-width  initial-scale 1  gt  x000D   lt link rel  stylesheet  href  https   fonts googleapis com icon family Material Icons  gt    x000D   lt  head gt    x000D     x000D   lt body onload  init     gt  x000D   lt section gt  x000D   lt canvas id  color  gt  lt  canvas gt  x000D   x000D   lt div class  w3-container middle  id  text  gt  x000D   lt i class  material-icons w3-highway-blue  style  font-size 60px   gt assessment lt  i gt  x000D   lt h1 gt Medimos las acciones de tus ventas y disenamos en la WEB tu Marca  lt  h1 gt  x000D   lt small gt Metrics  amp amp  WEB lt  small gt  x000D   lt  div gt  x000D   lt  section gt   x000D   x000D   x000D

User · Answer

Nope  this cannot be done since opacity affects the whole element including its content and there s no way to alter this behavior  You can work around this with the two following methods   Secondary div  Add another div element to the container to hold the background  This is the most cross-browser friendly method and will work even on IE6   HTML   lt div class  myDiv  gt       lt div class  bg  gt  lt  div gt      Hi there  lt  div gt    CSS   myDiv       position  relative      z-index  1      myDiv  bg       position  absolute      z-index  -1      top  0      bottom  0      left  0      right  0      background  url test jpg  center center      opacity   4      width  100       height  100       See test case on jsFiddle   before and   before pseudo-element  Another trick is to use the CSS 2 1  before or CSS 3   before pseudo-elements   before pseudo-element is supported in IE from version 8  while the   before pseudo-element is not supported at all  This will hopefully be rectified in version 10   HTML   lt div class  myDiv  gt      Hi there  lt  div gt    CSS   myDiv       position  relative      z-index  1      myDiv before       content          position  absolute      z-index  -1      top  0      bottom  0      left  0      right  0      background  url test jpg  center center      opacity   4      Additional notes  Due to the behavior of z-index you will have to set a z-index for the container as well as a negative z-index for the background image   Test cases  See test case on jsFiddle    Using CSS 2 1  before Using CSS 3   before

User · Answer

I implemented Marcus Ekwall s solution but was able to remove a few things to make it simpler and it still works  Maybe 2017 version of html css   html    lt div id  content  gt     lt div id  bg  gt  lt  div gt     lt h2 gt What is Lorem Ipsum  lt  h2 gt     lt p gt  lt strong gt Lorem Ipsum lt  strong gt  is simply dummy text of the printing and typesetting industry  Lorem Ipsum has been the industry s standard dummy text ever since the 1500s  when an unknown printer took a galley of type and scrambled it to make a type specimen     book  It has survived not only five centuries  but also the leap into electronic typesetting  remaining essentially unchanged  It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages  and more recently with     desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum  lt  p gt   lt  div gt    css    content     text-align  left    width  75     margin  auto    position  relative      bg     position  absolute    top  0    bottom  0    left  0    right  0    background  url  https   static pexels com photos 6644 sea-water-ocean-waves jpg   center center    opacity   4    width  100     height  100       https   jsfiddle net abalter 3te9fjL5

User · Answer

lt  DOCTYPE html gt   lt html gt   lt head gt  lt  head gt   lt body gt   lt div style   background-color   00000088  gt  Hi there  lt  div gt   lt  --  00 would be r  00 would be g  00 would be b  88 would be a  -- gt   lt  body gt   lt  html gt    including 4 sets of numbers would make it rgba  not cmyk  but either way would work  rgba  00000088  cmyk  0   0   0   50

User · Answer

So here is an other way   background-image  linear-gradient rgba 255 255 255 0 5   rgba 255 255 255 0 5    url  your image png

User · Answer

None of the solutions worked for me  If everything else fails  get the picture to Photoshop and apply some effect  5 minutes versus so much time on this

[html] Can I set an opacity only to the background image of a div?

css

html

Examples related to html

Examples related to css

Examples related to background

Examples related to background-image