Demo: Background Clip

Padding Box

Border Box

In this example, there’s a red border with alpha transparency. The padding box appears pink against the white background of the page. The border box appears purple because it blends with the blue background instead.

<div class='example'>
  <div id='padding-box'>
    Padding Box
  </div>
  <div id='border-box'>
    Border Box
  </div>
</div>

.example
  #padding-box
    Padding Box
  #border-box
    Border Box

@import "https://compass-style.org/files/docs/examples/compass/css3/compass/css3.scss";
.example {
  padding: 2em;
  div {
    background-color: blue;
    border: 10px solid rgba(255, 0, 0, 0.5);
    color: white;
    @include text-shadow(darken(blue, 50%), 2px, 2px);
    padding: 3px;
    text-align: center;
    margin-bottom: 2em; }
  #padding-box {
    @include background-clip(padding-box); }
  #border-box {
    @include background-clip(border-box); } }

@import https://compass-style.org/files/docs/examples/compass/css3/compass/css3.scss
.example
  padding: 2em
  div
    background-color: blue
    border: 10px solid rgba(255, 0, 0, 0.5)
    color: white
    +text-shadow(darken(#00f, 50%), 2px, 2px)
    padding: 3px
    text-align: center
    margin-bottom: 2em
  #padding-box
    +background-clip(padding-box)
  #border-box
    +background-clip(border-box)

@charset "UTF-8";
.example {
  padding: 2em;
}
.example div {
  background-color: blue;
  border: 10px solid rgba(255, 0, 0, 0.5);
  color: white;
  text-shadow: black 2px 2px 1px;
  padding: 3px;
  text-align: center;
  margin-bottom: 2em;
}
.example #padding-box {
  -moz-background-clip: padding;
  -webkit-background-clip: padding;
  -o-background-clip: padding-box;
  -ms-background-clip: padding-box;
  -khtml-background-clip: padding-box;
  background-clip: padding-box;
}
.example #border-box {
  -moz-background-clip: border;
  -webkit-background-clip: border;
  -o-background-clip: border-box;
  -ms-background-clip: border-box;
  -khtml-background-clip: border-box;
  background-clip: border-box;
}