我尝试为我的任务使用背景色透明(可以在图像中看到)，但它没有用。 background-transparent 什么都不做，它显示 li 的 background-color 。
我尝试了很多方法，但都不奏效。我能做些什么 ？
提前致谢。
HTML:
<div>
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
<span class="left-arrow-winners"></span>
<span class="right-arrow-winners" ></span>
<div>
CSS:
li {
display: inline-block;
box-sizing: border-box;
margin: 0 12px;
padding: 4px 12px;
background-color: rgba(230, 229, 220, 0.75);
transition: all 250ms;
border-radius: 4px;
}
.left-arrow-winners ,
.right-arrow-winners {
cursor: pointer;
font: 18px/32px icomoon;
position: absolute;
top: 4px;
}
.left-arrow-winners {
left: 0
}
.right-arrow-winners {
right: 0
}
.left-arrow-winners:before {
content: "\e92a";
}
.right-arrow-winners:before {
content: "\e92b";
}
最佳答案
可能是您没有在正确的 html 标签中设置透明度样式。 如您所说，应用透明度后，您将获得 li 标签的背景颜色，因此请尝试在 li 标签中设置透明度。
注意 如果我们在任何元素中应用透明度，很明显特定 DOM 元素的背景颜色会变得透明并且我们可以看到其父元素的背景颜色(在您的情况下，父元素元素是li)。
要使渐变透明，将rgba()的第4个参数opacity设置为0，这里用粗体标记，
背景:线性渐变(向右，rgba(230, 229, 220, 0.75) 0, rgba(0, 0, 0, 0) 75%);
在下面的示例中，我尝试展示了两种方式，可能是您想要的一种。
ul{
list-style:none;
padding:0;
margin:0;
}
ul li a {
display: inline-block;
color: white;
float:left;
margin:5px;
}
li{
display: inline-block;
box-sizing: border-box;
margin: 0 12px;
padding: 4px 12px;
background-color: rgba(230, 229, 220, 0.75);
transition: all 250ms;
border-radius: 4px;
}
.transparentBackground{
background: linear-gradient(to right, rgba(230, 229, 220, 0.75) 0, rgba(0, 0, 0, 0) 75%);
background: -webkit-linear-gradient(to right, rgba(230, 229, 220, 0.75) 0, rgba(0, 0, 0, 0) 75%); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(to right, rgba(230, 229, 220, 0.75) 0, rgba(0, 0, 0, 0) 75%); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(to right, rgba(230, 229, 220, 0.75) 0, rgba(0, 0, 0, 0) 75%); /* For Firefox 3.6 to 15 */
}
body{
background:linear-gradient(to right, red 0, yellow 75%);
background:-webkit-linear-gradient(to right, red 0, yellow 75%);
background:-o-linear-gradient(to right, red 0, yellow 75%);
background:-moz-linear-gradient(to right, red 0, yellow 75%);
}
.transparentBackground1{
background-color: transparent;
}<body>
<ul class="menu-content">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li class="transparentBackground"><a href="#">Link 3 >></a></li>
</ul>
<br/>
<ul class="menu-content">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li class="transparentBackground1"><a href="#">>></a></li>
</ul>
</body>关于css - 背景:透明不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44398964/