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>

  • 相关阅读:
    NVIDIA驱动瘫痪再重装的问题
    ubuntu 14.04下NVIDIA驱动及cuda toolkit安装
    ubuntu下sogou输入法的输入框只显示英文不显示中文的解决方法
    ubuntu14.04下安装opencv3.2
    ubuntu14.04 卸载 boost
    编译错误: /usr/lib may be hidden by files in /home/username/anaconda/lib
    爬虫抓取网页内容
    学生手册成绩分析以学院为单位进行划分
    VisualSVN 设置SVN客户端必须填写日志才能提交
    Linux系统上java应用(例如spring boot)启动慢的原因之一
  • 原文地址:https://www.cnblogs.com/yuzhongwusan/p/1424809.html
Copyright © 2011-2022 走看看