<aside>
  <label for="border-box">
    <input type="radio" name='clip' id="border-box" checked>
      background-clip: border-box;
  </label>
  <label for="padding-box">
    <input type="radio" name='clip' id="padding-box">
      background-clip: padding-box;
  </label>
  <label for="content-box">
    <input type="radio" name='clip' id="content-box">
      background-clip: content-box;
  </label>
  <label for="text">
    <input type="radio" name='clip' id="text">
      background-clip: text;
  </label>
</aside>
<main class='border'>
  <p>background-clip: <span id='type'>border-box;</span></p>
</main>
main
  width 400px
  height 400px
  font-size 30px
  color #fff
  font-weight bold
  padding 20px
  border 20px dashed #333;
  background url(https://yogwang.site/img/userimg.jpg) center no-repeat
  box-sizing border-box
  &.border-box
    background-clip border-box
  &.padding-box
    background-clip padding-box
  &.content-box
    background-clip content-box
  &.text
    /* 草案,
      虽然主流浏览器实现了功能
      但不推荐使用 
    */
    color transparent
    background-clip text
    -webkit-background-clip text
aside
  width 300px
  margin-right 20px
  label
    padding 25px 0
    border red 4px solid 
    margin-bottom 20px
    display block
    cursor pointer
body
  width 720px
  margin 30px auto
  display flex
View Compiled
$('input').click(function(){
  const type=$(this).attr('id')
  $('main').removeClass().addClass(type)
  $("#type").text(type)
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js