Question

我尝试将背景颜色透明用于我的任务（可以在图片中看到），但它没用。背景透明无所事事，它展示了背景色。

我尝试了许多方法，但它不起作用。我能做什么？

提前致谢。

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

Answer 1

您可能没有在正确的html标记中设置透明度样式。正如您所说，在应用透明度后，您将获得li标签的背景颜色，因此请尝试在li标签中设置透明度。

注意如果我们在任何元素中应用透明度，很明显特定DOM元素的背景颜色变得透明，我们可以看到其父元素的背景颜色（在你的case，父元素是li）。

要将渐变设为透明，请将opacity（rgba（）的第4个参数设置为0，此处标记为粗体字，

背景：线性渐变（右边，rgba（230,229,220,0.75）0，rgba（0,0,0， 0 ）75％）;

在下面的示例中，我尝试显示两种方式，可能是您想要的方式。

＆＃13;

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

＆＃13;

<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  &nbsp;&nbsp;>></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>

＆＃13;

Answer 2

这可能是你最好的朋友：http://www.colorzilla.com/gradient-editor/

这是你在找什么？

白色 - 淡入透明背景？

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;
}
li{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+51,7db9e8+100&0.9+51,0.01+100 */
background: -moz-linear-gradient(left, rgba(255,255,255,0.9) 51%, rgba(125,185,232,0.01) 100%); 
/* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(255,255,255,0.9) 51%,rgba(125,185,232,0.01) 100%); 
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(255,255,255,0.9) 51%,rgba(125,185,232,0.01) 100%); 
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6ffffff', endColorstr='#037db9e8',GradientType=1 ); 
/* IE6-9 */
}

.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";
}
div{
background-color:blue;
}

<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>

背景：透明不起作用

2 个答案: