Question

我想让黑色背景变得有点透明，但不幸的是它也使幻灯片中的图像也变得透明。

代码：

#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;
}

Answer 1

您可以使用RGBA()设置不透明度的背景颜色。

示例：

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

这会使你的背景变黑，不透明度为40％。

Answer 2

背景颜色可以alpha，RGBA最后一个值是alpha，应该介于0和1之间，其中0是不可见的，1是不透明的。前三个值与您使用RGB（无论如何）相同

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>

我给了身体一个背景，所以你可以看到它正在工作。希望你觉得它有用。

如何使幻灯片的背景更加不透明

2 个答案: