検索

ホームページ  >  に質問  >  本文

html - 图片的左上角显示 【推荐】、【热销】标签的效果,使用Css 如何实现呢?

黄舟黄舟2872日前1128

全員に返信(2)返信します

  • PHP中文网

    PHP中文网2017-04-17 14:48:43

    通常、解決には絶対位置を使用します

     <p class="parent">
            <span class="text">推奨</span>
            <p class="triangle-topleft">
            </p>
        </p>
    
       。親{
            位置: 相対的;
            幅: 200ピクセル;
            高さ: 200ピクセル;
        }
        .parent .text{
            表示: インラインブロック;
            変換: 回転(-45度);
            パディング: 20px;
            色: #fff;
        }
       .triangle-topleft{
            幅: 0;
            高さ: 0;
            ボーダートップ: 100 ピクセルの赤一色。
            境界線右: 100 ピクセルの単色透明。
            位置: 絶対;
            トップ: 0;
            z インデックス: -1;
        }

    返事
    0
  • 大家讲道理

    大家讲道理2017-04-17 14:48:43

    
    <html>
    <頭>
        <title></title>
    </head>
    <本体>
    <style type="text/css">
         .main_img{ 表示: ブロック;
      幅: 90%;
      高さ: 4.954em;
      位置: 相対的;
      オーバーフロー: 非表示;
      マージン左: 0.742em;
      マージントップ: 0.8em;
    }
    .main_img .new{
        幅: 3.25em;
      高さ: 3.25em;
      位置: 絶対;
      トップ: 0;
      左: 0;
      背景サイズ: 3.25em 3.25em;
      背景: URL(http://m.lobo666.com/Public/image/main/new.png) リピートなしの中心。
    }
    </スタイル>
    <p class="main_img">
             <!-- <a href="/index.php/Home/Detail/index/id/364.html"> -->
             <a href="/index.php/Home/Detail/index/id/364/aid/100004.html">
                <img src="http://lobo.lobo666.com/Uploads/Building/61772d6d46.jpg">
                   
              </a>
              <!-- <p></p>   -->
                      <p class="new"></p>           
            </p>
    </ボディ>
    </html>

    返事
    0
  • キャンセル返事