前提
background-colorとborderを設定した要素内にアイコンがあります。
サンプル
実現したいこと
下記画像のような仕上がりにしたいです。
サンプルで言うと、赤い円内の緑色の部分を切り取り、切り取った部分から背景が見える状態です。
調べたこと
background-clip: text;というものを見つけました。
background-clip - CSS: カスケーディングスタイルシート | MDN
ですが、background-clip: text;は指定したテキスト部分以外を切り取るプロパティのようです。
実現したいことを実現するには、逆にテキスト部分を切り取る必要があるので、background-clip: text;では実現したいことが実装できなさそうでした。
また、「css 切り取り」「css 切り抜き」などの語句でググりましたが、background-clip: text;に関するページが出てきてしまい、欲しい情報を見つけることができませんでした。
該当のソースコード
css
1html{ 2 background-image: url(https://cdn.pixabay.com/photo/2019/09/06/20/25/refuge-4457275_960_720.jpg); 3 background-position: center center; 4 background-repeat: no-repeat; 5 background-attachment: fixed; 6 background-size: cover; 7 height: 100vh; 8 display: flex; 9 justify-content: center; 10 align-items: center; 11} 12 13#box { 14 background-color: red; 15 width: 200px; 16 height: 200px; 17 border: 15px double green; 18 border-radius: 50%; 19 display: flex; 20} 21 22.fa-smile { 23 color: green; 24 font-size: 130px; 25 margin: auto; 26}
html
1<body> 2 <div id="box"> 3 <i class="fas fa-smile"></i> 4 </div> 5 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous"> 6</body>
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。