CODEWITHSUNDEEP
cssbackground
user6644024
user6644024

Reputation:

Background: transparent does not work

I try to use background-color transparent for my task (can see in image) , but its not useful . Background-transparent do nothing , its show li's background-color .

I try many ways but its not working . What can i do ?

Thanks in advance .

enter image description here

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

Upvotes: 0

Views: 3481

Answers (2)

Pawan Kumar
Pawan Kumar

Reputation: 1374

Might be you have not set the transparency style in the correct html tag. As you said, after applying transparency, you are getting background color of li's tag, so try to set transparency in the li tag.

Note that if we apply transparency in any element, it is obvious that the particular DOM element's background color gets transparent and we can see the background color of its parent element(in your case, the parent element is li).

To make the gradient as transparent, set the opacity which is 4th parameter of rgba() to 0, which is marked as bold letter here,

background: linear-gradient(to right, rgba(230, 229, 220, 0.75) 0, rgba(0, 0, 0, 0) 75%);

In the below example, I tried to show 2 ways, might be one which you want.

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

Upvotes: 1

Sensoray
Sensoray

Reputation: 2420

This can be your best friend: http://www.colorzilla.com/gradient-editor/

Is this what you were looking for?

White - fade to transparent background?

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>

Upvotes: 0

Related Questions