ホームページ >ウェブフロントエンド >htmlチュートリアル >CSSは、テキストを非表示にするという目的を達成するために、背景画像を使用してテキストを置き換えます
HTMLコードの違いにより、大きく以下の2つのメソッドに分けられます
htmlコード:
こんにちは
最初の方法: text-indent
.replace-indent{
高さ:200px;
幅:200px;
背景:url();
text-indent:-9999px;
}
2 番目の方法:
.replace-indent{
高さ:200px;
幅:200px;
背景:url();
text-indent:100%;
white-space:nowrap;
オーバーフロー:非表示;
}
3番目の方法:
.replace-indent{
高さ:0px;
幅:200px;
背景:url();
パディング:200px 0 0 0;
オーバーフロー:非表示;
}
4番目の方法: 前
.replace-indent{
width:画像の幅;
高さ:画像の高さ;
オーバーフロー:非表示;
}
.replace-indent : before{
コンテンツ:url();
}
htmlコード:
こんにちは
最初の方法:
.replace-indent{
高さ:200px;
幅:200px;
背景:url();
}
スパン{
表示:なし;
}
2 番目の方法:
.replace-indent{
高さ:200px;
幅:200px;
背景:url();
}
スパン{
幅:0;
高さ:0;
表示:ブロック;
オーバーフロー:非表示;
}
3番目の方法:
.replace-indent{
高さ:200px;
幅:200px;
背景:url();
}
スパン{
clip-path:polygon(0px 0px,0px 0px,0px 0px,0px 0px,0px 0px);
-webkit-clip-path:polygon(0px 0px,0px 0px,0px 0px,0px 0px,0px 0px);
}