文字の画像(イメージ)化
cman.jp cman.jp > パーツ作成メニュー > BOXのデザイン

背景画像を文字で切り抜くCSS作成

CSSのみで背景に指定した画像を文字で切り抜くことができます。また、背景の画像を動かすことで、動きのある印象的な文字となります。

当ページでは、背景画像と動きを指定し、いろいろな動きのある文字を作成できます。生成された「html」「css」などのソースコードは、そのままコピー&ペーストで利用することが出来ます。

背景画像を文字で切り抜くには、「-webkit-background-clip: text;」を指定します。
「-webkit-background-clip: text;」は、古いブラウザや一部ブラウザでは動作しません。
未対応のブラウザでは、正しく表示されません。
また、-webkit-のベンダープレフィックスが必要です。(2018月5月時点)

画像を文字で切り抜いてみよう!

背景の画像
背景画像の動き
文字
切り抜き
使用したhtml
<div class="bgText">文字<br>切り抜き</div>
生成したCSS
<style type="text/css">
.bgText {
  width: 100%; 
  height: 300px; 
  font-size: 80px; 
  font-weight: bold; 
  color: transparent; 
  -webkit-background-clip: text; 
  background-size: cover;                  /* 背景領域を全て隠す */
  background-image: url(https://webparts.cman.jp/image/shizen550.jpg);  /* 写真 */
  animation : bgAnime 5s linear infinite;  /* 5秒間一定速度で無限に繰り返す */
}
  @keyframes bgAnime {                     /* スクロール */
     0% { background-position: 0 0 } 
   100% { background-position: 600px 0px }
}
</style>

背景の画像や動きの詳細は、当サイトの関連するページを参照ください。当サイト内の関連するページ

ページTOP
広告
広告

画像を文字で切り抜く色々なパターン

文字以外の部分の背景画像も表示する

背景画像を表示するには、文字で切り抜く画像を重ねて表示します。切り抜いた文字を識別させるために、背景に色も指定します。

文字
切り抜き
<div class="imgText2>
  <div class="bgText2></div>
  <div class="Text2>文字<br>切り抜き</div>
</div>
<style type="text/css">
.imgText2 {                  /* 背景画像のサイズ指定 */
  display:inline-block;
  position:relative;
  width: 100%;
  height: 300px;
  margin:0 auto;
}
.bgText2 {                   /* 背景画像の指定 */
  position:absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-image: url(https://webparts.cman.jp/image/shizen550.jpg);
}
.bgText2::before {           /* 背景の色指定 */
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  content: '';
  background-color: #00ffff; /* 背景の色 */
  opacity: .4;               /* 透明度 */
}
.Text2 {                     /* 画像を文字で切り抜く指定 */
  position:absolute;
  width: 100%;
  height: 300px;
  font-size: 100px;
  font-weight: bold;
  background-size: cover;
  background-position: center;
  background-image: url(https://webparts.cman.jp/image/shizen550.jpg);
  -webkit-background-clip: text;
  color: rgba(0, 0, 255, 0.3); /* 文字の色指定 */
}
</style>

文字を背景と逆の色で切り抜く

「linear-gradient」を使用して背景を2色で指定します。文字の背景に、全体背景と逆の順に色を指定します。

文字切り抜き

<div class="Text3"><p>文字切り抜き</p></div>
<style type="text/css">
.Text3 {                /* 全体背景の指定 */
  padding: 10px 0;
  background: linear-gradient(#0000ff 50%, #00ffff 50%);
}
.Text3 p {              /* 文字の切り抜き指定 */
  font-size: 80px;
  font-weight: bold;
  margin:10px 0;
  position: relative;
  display: inline-block;
  background: linear-gradient(#00ffff 50%, #0000ff 50%);
  -webkit-background-clip: text;
  color: transparent;
}
</style>
ページTOP

注意事項

・「-webkit-background-clip: text;」が未対応のブラウザでは、正しく表示されません。また、-webkit-のベンダープレフィックスが必要です。(2018月5月時点)

・画像を文字で切り抜くには、<SVG>内に<text>要素を指定することでも可能です。画像の切り抜き

ページTOP
広告

生成できるホームページ・パーツ一覧
ご利用時の注意事項・制約事項
よくあるご質問
何で無料なの?
生成コードに利用制限はある?
生成コードに保証はある?
jQueryで生成できない?

広告
ページTOP

当サイト内の関連するページ

広告
QrCode
このページのURL
スマートフォン・タブレット
運営:株式会社シーマン