zoukankan      html  css  js  c++  java
  • css sprites图片背景优化技术

    转自:蓝色

    扑克牌

    介绍一种比较简单的实现方法,这种方法不用一张图片。
    原理是:用四个特别字符的html标签来实现。
    1. & spades;表示黑桃
    2. & hearts;表示红心
    3. & clubs;表示梅花
    4. & diams;表示方块
    先写结构:
    <div class="card" style="left:10px;top:20px;">
      <div class="front">
        <b class="index">9<br />& spades;</b>
        <span class="A1">& spades;</span>
        <span class="A2">& spades;</span>
        <span class="A3">& spades;</span>
        <span class="A4">& spades;</span>
        <span class="B1">& spades;</span>
        <span class="C1">& spades;</span>
        <span class="C2">& spades;</span>
        <span class="C3">& spades;</span>
        <span class="C4">& spades;</span>
        <b class="end">& spades;<br/>9</b>
      </div>
    </div>
    再写样式:
    <style type="text/css">
    .card{125px;height:170px; position:absolute;overflow:hidden;border:1px #c0c0c0 solid;}
    /*中间图片通用设置*/
    span{
    display:block;
    20px;
    height:30px;
    line-height:30px;
    position:absolute;
    font-size:26px;
    left: 22px;
    top: 130px;
    }
    /*小图片通用设置*/
    /*数字通用设置*/
    b{display:block;15px;height:10px; position:absolute;font-size:10px;text-align:center;font-weight:bold;overflow:hidden;}
    /*各坐标点位置*/
    .A1{left:21px;top:10px;}
    .A2{left:21px;top:50px;}
    .A3{left:21px;top:90px;}
    .A4{left:21px;top:130px;}
    .B1{left:51px;top:76px;}
    .C1{left:83px;top:10px;}
    .C2{left:83px;top:50px;}
    .C3{left:83px;top:90px;}
    .C4{left:83px;top:130px;}
    .scroll{FILTERrogidXImageTransform.Microsoft.BasicImage(Rotation=2);height:1px}
    .index {
      font-size: 16px;
      font-weight: bold;
      text-align: center;
      14px;
      height:36px;
      position: absolute;
      left:5px;
      top:0px;
    }
    .end {
      font-size: 16px;
      font-weight: bold;
      text-align: center;
      14px;
      height:36px;  
      position: absolute;
      right:5px;
      bottom:0px;
    }
    .red { color: #ff0000; }
    .font{font-size:34px;}
    </style>
    注意:为了真实的还原一张扑克牌,我在第二张扑克牌中加入滤镜功能,让下面的图案垂直翻转,但这种方法会造成图片不清晰,并且这种方法只有IE系列的浏览器才能识别,如果高手们有其它更好的办法,请不吝赐教!

    完整代码如下:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
    .card{125px;height:170px; position:absolute;overflow:hidden;border:1px #c0c0c0 solid;}
    /*中间图片通用设置*/
    span{
     display:block;
     20px;
     height:30px;
     line-height:30px;
     position:absolute;
     font-size:26px;
     left: 22px;
     top: 130px;
    }
    /*小图片通用设置*/
    /*数字通用设置*/
    b{display:block;15px;height:10px; position:absolute;font-size:10px;text-align:center;font-weight:bold;overflow:hidden;}
    /*各坐标点位置*/
    .A1{left:21px;top:10px;}
    .A2{left:21px;top:50px;}
    .A3{left:21px;top:90px;}
    .A4{left:21px;top:130px;}
    .B1{left:51px;top:76px;}
    .C1{left:83px;top:10px;}
    .C2{left:83px;top:50px;}
    .C3{left:83px;top:90px;}
    .C4{left:83px;top:130px;}
    .scroll{FILTER:progid:DXImageTransform.Microsoft.BasicImage(Rotation=2);height:1px}
    .index {
      font-size: 16px;
      font-weight: bold;
      text-align: center;
      14px;
      height:36px;
      position: absolute;
      left:5px;
      top:0px;
    }
    .end {
      font-size: 16px;
      font-weight: bold;
      text-align: center;
      14px;
      height:36px; 
      position: absolute;
      right:5px;
      bottom:0px;
    }
    .red { color: #ff0000; }
    .font{font-size:34px;}
    </style>
    </head>
    <body>
    <!--9字符-->
    <div class="card" style="left:10px;top:20px;">
      <div class="front">
        <b class="index">9<br />♠</b>
        <span class="A1">♠</span>
        <span class="A2">♠</span>
        <span class="A3">♠</span>
        <span class="A4">♠</span>
        <span class="B1">♠</span>
        <span class="C1">♠</span>
        <span class="C2">♠</span>
        <span class="C3">♠</span>
        <span class="C4">♠</span>
        <b class="end">♠<br/>9</b>
      </div>
    </div>
    <!--9字符-->
    <div class="card" style="left:175px;top:20px;">
      <div class="front red">
        <b class="index">9<br />♥</b>
        <span class="A1">♥</span>
        <span class="A2">♥</span>
        <span class="A3">♥</span>
        <span class="A4">♥</span>
        <span class="B1">♥</span>
        <span class="C1">♥</span>
        <span class="C2">♥</span>
        <span class="C3">♥</span>
        <span class="C4">♥</span>
        <b class="end">♥<br/>9</b>
      </div>
    </div>
    <!--9字符-->
    <div class="card" style="left:340px;top:20px;">
      <div class="front red">
        <b class="index">9<br />♣</b>
        <span class="A1">♣</span>
        <span class="A2">♣</span>
        <span class="A3 scroll">♣</span>
        <span class="A4 scroll">♣</span>
        <span class="B1">♣</span>
        <span class="C1">♣</span>
        <span class="C2">♣</span>
        <span class="C3 scroll">♣</span>
        <span class="C4 scroll">♣</span>
        <b class="end scroll">9<br/>♣</b>
      </div>
    </div>
    <!--9字符-->
    <div class="card" style="left:510px;top:20px;">
      <div class="front red">
        <b class="index">9<br />♦</b>
        <span class="A1 font">♦</span>
        <span class="A2 font">♦</span>
        <span class="A3 font">♦</span>
        <span class="A4 font">♦</span>
        <span class="B1 font">♦</span>
        <span class="C1 font">♦</span>
        <span class="C2 font">♦</span>
        <span class="C3 font">♦</span>
        <span class="C4 font">♦</span>
        <b class="end">♦<br/>9</b>
      </div>
    </div>
    </body>
    </html>

  • 相关阅读:
    iot 表索引dump《2》
    heap表和iot表排序规则不同
    Cannot complete the install because one or more required items could not be found.
    iot表输出按主键列排序,heap表不是
    iot 表主键存放所有数据,且按数据插入顺序排序
    iot表和heap表排序规则不同
    org.eclipse.graphiti.ui.editor.DiagramEditorInput.
    Oracle 排序规则
    perl 异步超时 打印错误
    14.6.3 Grouping DML Operations with Transactions 组DML操作
  • 原文地址:https://www.cnblogs.com/yuzhongwusan/p/1424809.html
Copyright © 2011-2022 走看看