18
January
[PR]
×
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
.multi_bg_example {
background-image:
url("http://demos.hacks.mozilla.org/openweb/resources/images/logos/firefox-48.png"), /* 最前面の背景レイヤーの背景画像 */
linear-gradient( to right, rgba(255,255,255,0), #fff ),
url("http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg");
background-repeat:
no-repeat, /* 最前面の背景レイヤーに対応 */
no-repeat,
repeat;
background-position:
bottom right, /* 最前面の背景レイヤーに対応 */
left,
right;
}
一番目の指定が一番上に来る画像 http://www.atmarkit.co.jp/ait/articles/1309/24/news053.html
基本
a:hover {background:#ffffff; text-decoration:none;} /*BG color is a must for IE6*/ a.tooltip span {display:none; padding:2px 3px; margin-left:8px; width:130px;} a.tooltip:hover span{display:inline; position:absolute; border:1px solid #cccccc; background:#ffffff; color:#6c6c6c;}
<a href="#" class="tooltip">Tooltipだよ<span>吹き出しで出るテキスト</span></a>
a.tooltip:hover span{
display:inline;
position:absolute;
/*border:1px solid #dc0000; 吹き出しの枠線色を削除*/
background:#dc0000; /*吹き出しの背景色の変更*/
color:#fff; /*吹き出しの文字色の変更*/
bottom:25px; /*位置指定追加。クエスチョンマークの下端から、吹き出しの下端を25px上げる*/
left:-100px; /*位置指定追加。吹き出しの幅の半分を左に移動させる*/
}
a{
position:relative; /*吹き出しの表示位置指定の基準とするため追加*/
}
/*吹き出しの足*/
a.tooltip:hover span:after {
content: "";
display: block;
width:0;
height:0;
border-top:8px solid #dc0000;
border-left:8px solid transparent;
border-right:8px solid transparent;
position: absolute;
left: 100px;
bottom:-8px;
}