ベストセラー人気 WordPress テーマTop 30 詳細

テキストを画像に置き換える/画像を別の画像に置き換えるCSS

Last Updated:2015年10月30日| コメントを残す
  • Naver ブログを共有する
  • Naver バンドに共有する
  • Facebook 共有する
  • Twitter 共有する
  • 카카오스토리공유하기

図を別の画像に置き換えること(画像を別の画像に置き換え)

HTMLの例:

<div id='#Image'></div>

CSSの例:

#Image {
width:100px;
height:100px;
background:url("image.png") no-repeat;
}

もう少し洗練された方法で、次のようなコードを試してみることができます(出典: css-tricks).

.banner {
display: block;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: url(http://www.abc.com/newbanner.png) no-repeat;
width: 180px; /* 새 이미지의 폭 */
height: 236px; /* 새 이미지의 높이 */
padding-left: 180px; /* 새 이미지의 폭과 동일하게 */
}

テキストを画像に置き換える

HTMLの例:

<h1 class="hide-text show-image">숨길 텍스트</h1>

CSSの例:

.show-image {
width: 40px;
height: 40px;
background: url(../images/my-title-image.png);
}

.hide-text {
text-indent: 100%; /* 창 밖으로 이동시킴 */
white-space: nowrap; /* 다시 돌아오지 않도록 함 */
overflow: hidden;

この方法は、Zeldmanという人が発見した洗練された方法とね(ここ を参照)。



コメントを残す

コメント