How would I make background of slideshow more opaque

Question

I kinda want to make the black background a little transparent but unfortunately its also making the image within the slide transparent as well.

Code:

#slideshow {
    float:left;
    width: 810px;
    height: 360px;
    margin: 10px 0 0 10px;  
    background-color: rgb(0,0,0);
    -webkit-border-radius: 6px; 
    -moz-border-radius: 6px;
    border-radius: 6px;
}

#slideshow img {
    margin: 5px 5px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

Saurabh that will set the image's opacity too, as mentioned by Gorvilla in his/her question. — , Aug 08 '16 at 14:48

score 0 · Answer 1 · 2016-08-08T14:52:22.183

0

You can use RGBA() to set a background color with opacity.

Example:

#div {
   background-color: rgba(0,0,0,.4);
}

This will make your background black with 40% opacity.

edited Aug 08 '16 at 14:52

answered Aug 08 '16 at 14:47

score 0 · Answer 2 · answered Aug 08 '16 at 14:55

The background color can have alpha which is RGBA the last value is the alpha and should be between 0 and 1, where 0 is invisible and 1 is opaque. The first 3 values are the same as if you were using RGB (as you are anyway)

body {
  background: radial-gradient(black 15%, transparent 16%) 0 0, radial-gradient(black 15%, transparent 16%) 8px 8px, radial-gradient(rgba(255, 255, 255, .1) 15%, transparent 20%) 0 1px, radial-gradient(rgba(255, 255, 255, .1) 15%, transparent 20%) 8px 9px;
  background-color: #282828;
  background-size: 16px 16px;
}
#slideshow {
  float: left;
  width: 810px;
  height: 360px;
  margin: 10px 0 0 10px;
  background-color: rgba(0, 0, 0, 0.6);
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}
#slideshow img {
  margin: 5px 5px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}

<div id="slideshow">
  <img src="https://lh3.ggpht.com/ujIagYPIwiD4ifRt8MxAXqqsQ3BHqc8wv5BVwpoC1wiWqeRyhYGqQr1vKEJcsFchNcfM=w300" />
</div>

I gave the body a background so you could see it was working. Hope you find it helpful.

This is duplicate to my answer, Stackoverflow allows you to edit/suggest an answer to add content. — , Aug 08 '16 at 15:05

How would I make background of slideshow more opaque

2 Answers2