ホームページ >ウェブフロントエンド >htmlチュートリアル >CSSは、テキストを非表示にするという目的を達成するために、背景画像を使用してテキストを置き換えます

CSSは、テキストを非表示にするという目的を達成するために、背景画像を使用してテキストを置き換えます

WBOY
WBOYオリジナル
2016-07-06 13:28:221427ブラウズ

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);

}

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。