title: Sliding door technique with semi transparent backgrounds?
body: <p>I'm working on a button with a glossy appearance. The button can have various colors and sizes. This is what i have done so far:</p>
  
  <pre><code>.btn-zen-inverse, .btn-zen-inverse:hover{
      color: white;
      background: 
      url("../img/btn_right.png") no-repeat right 0,
      url("../img/btn_left.png") no-repeat  left 0,
      url("../img/btn_center.png") repeat-x 42px 0;
    background-color: #273032;
    background-size: contain; 
    line-height: 50px;
    margin: 12px 18px 3px 0;
    padding: 0;
    border: 2px solid white !important;
  }
  </code></pre>
  
  <p>The images referenced are alpha transparent. The idea is to set the color based on the background-color attribute. The image has a few other properties aswell, but those are merely estetic.</p>
  
  <p>This ofcorse renders an image that looks like this! 
  I would like the center-image to be visible only in the central part of the image. As you can see from my css. This only has to work perectly in the latest version of the big 4 browsers.</p>
  
  <p><img src="https://i.stack.imgur.com/ridM0.png" alt="enter image description here"></p>
  
  <p>This is what I would like it to look like:</p>
  
  <p><img src="https://i.stack.imgur.com/s5rId.png" alt="enter image description here"></p>
  
  <p>One suggesion is to do this with background-gradients. If that is possible, I need to define the background position similairly to the way padding/margin works. Is that possible?</p>
  
  <p>The design contains:
  2 borders: 
    one white
    one gradiented, 
  A background gradient.
  and a 1px thick vertical gradient at the very top.</p>