<aside>
<label for="border-box">
<input type="radio" name='origin' id="border-box">
background-origin: border-box;
</label>
<label for="padding-box">
<input type="radio" name='origin' id="padding-box" checked>
background-origin: padding-box;
</label>
<label for="content-box">
<input type="radio" name='origin' id="content-box">
background-origin: content-box;
</label>
</aside>
<main class='border'>
<p>background-origin: <span id='type'>padding-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
background-position 0 0
box-sizing border-box
&.border-box
background-origin border-box
&.padding-box
background-origin padding-box
&.content-box
background-origin content-box
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)
})
This Pen doesn't use any external CSS resources.