PHP & JavaScript Room :: 設置サンプル

<style type="text/css">
    /* エラー用 */
    div.alert {
        background-color:#FFEFEF;
        margin:0 0 1em 0; padding:10px;
        color:#C25338;
        border:1px solid #D4440D;
        line-height:1.5;
        clear:both;
        background-repeat:no-repeat;
        background-position:5px 5px;
    }
    div.alert span {
        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/content/img/css/cancel_48.png', sizingMethod='scale');
        width:48px; height:48px;
        position:relative;
        top:-5px; left:-5px;
        display:block;
        text-indent:-9999px;
        float:left;
    }
    html>body div.alert { background-image:url(/content/img/css/cancel_48.png); }
    html>body div.alert span { visibility:hidden; }
    /* OK用 */
    div.accepted {
        background-color:#e2ffaa;
        border-color:#76CC0B;
        color:#3A9805;
    }
    div.accepted span { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/content/img/css/accepted_48.png', sizingMethod='scale'); }
    html>body div.accepted { background-image:url(/content/img/css/accepted_48.png); }
    html>body div.accepted span { visibility:hidden; }
    /* 警告用 */
    div.warning {
        background-color:#ffff80;
        border-color:#E5A500;
        color:#CC7600;
    }
    div.warning span { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/content/img/css/warning_48.png', sizingMethod='scale'); }
    html>body div.warning { background-image:url(/content/img/css/warning_48.png); }
    html>body div.warning span { visibility:hidden; }
</style>

<div class="alert">
    <span>警告</span>
    ブロック要素に背景画像を繰返しなし（no-repeat）で指定してみました。<br>
    注釈など、注意書きに使ってもいいですね。
</div>

<div class="alert accepted">
    <span>警告</span>
    ブロック要素に背景画像を繰返しなし（no-repeat）で指定してみました。<br>
    注釈など、注意書きに使ってもいいですね。
</div>

<div class="alert warning">
    <span>警告</span>
    ブロック要素に背景画像を繰返しなし（no-repeat）で指定してみました。<br>
    注釈など、注意書きに使ってもいいですね。
</div>