<div class="demobox">
<div id="demo" style="-webkit-background-clip: content-box;">美女</div>
<div id="dctrl2"> 
<input id="cb" type="radio" name="dctrl2" value="content-box" checked="checked"> 
<label for="cb">content-box</label> <br>
	<input id="pb" type="radio" name="dctrl2" value="padding-box">
	<label for="pb">padding-box</label>
	<br>
	<input id="bb" type="radio" name="dctrl2" value="border-box">
	<label for="bb">border-box</label>
<br>
	<input id="t" type="radio" name="dctrl2" value="text">
	<label for="t">text</label>
</div>
.demobox{
    width: 303px;
    margin: 0 auto;
}
#demo{
    border: 20px dashed #ff5256;
    padding: 40px;
    display: inline-block;
    width: 303px;
    height: 485px;
    background: url(http://static.joubn.com/meinv.jpg);
    background-size:cover;
    font-size: 180px;
    line-height: 180px;
    font-weight: 900;
    color: transparent;
    font-family: 'MyCustomFont';
    margin-bottom:20px;
}
import $ from "https://cdn.skypack.dev/jquery@3.6.0";
$('input[name="dctrl2"]').change(function () {
  $("#demo").css("-webkit-background-clip", $(this).val());
});
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.