zoukankan      html  css  js  c++  java
  • 图片右上角添加标签

    标签

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            .app {
                 100%;
                height: 100%;
            }
    
            .box {
                 800px;
                height: 500px;
                margin: 20px auto;
            }
    
            .box-list {
                position: relative;
                float: left;
                margin: 10px;
                 100px;
                height: 100px;
                border: 1px dashed #cccccc;
                border-radius: 5px;
                overflow: hidden;
            }
    
            .box-list img {
                 100%;
                height: auto;
            }
    
            .box-list img:hover {
                -webkit-transform: scale(1.5) rotate(10deg);
                -moz-transform: scale(1.5) rotate(10deg);
                -o-transform: scale(1.5) rotate(10deg);
                cursor: pointer;
            }
    
            .box-list .label {
                font-size: 12px;
                line-height: 25px;
                background: #cccccc;
                position: absolute;
                right: 0;
                top: 0;
                z-Index: 2;
                padding: 0 2em;
                -webkit-transform-origin: left bottom;
                -moz-transform-origin: left bottom;
                transform-origin: left bottom;
                -webkit-transform: translate(29.29%, -100%) rotate(45deg);
                -moz-transform: translate(29.29%, -100%) rotate(45deg);
                transform: translate(29.29%, -100%) rotate(45deg);
                text-indent: 0;
                color: #ffffff;
            }
    
            .active {
                background: #00bdea !important;
            }
    
            .use {
                background: #46ca4b !important;
            }
    
            .hot {
                background: #ea0000 !important;
            }
        </style>
    </head>
    
    <body>
        <div class="app">
            <div class="box">
                <div class="box-list">
                    <img src="http://gss0.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/c75c10385343fbf2b730c101bc7eca8065388ff7.jpg"
                        alt="">
                    <div class="label stop">停用</div>
                </div>
                <div class="box-list">
                    <img src="http://cdn.duitang.com/uploads/item/201608/16/20160816100355_kTXdF.jpeg" alt="">
                    <div class="label active">激活</div>
                </div>
                <div class="box-list">
                    <img src="http://cdn.duitang.com/uploads/item/201408/10/20140810213735_xmrv5.jpeg" alt="">
                    <div class="label use">启用</div>
                </div>
                <div class="box-list">
                    <img src="http://pic1.zhimg.com/50/v2-104f1a86cb86d2401c47d66bfaec4612_hd.jpg" alt="">
                    <div class="label hot">hot</div>
                </div>
            </div>
        </div>
    
    </body>
    
    </html>
    
  • 相关阅读:
    Cxx11 stdchrono库详解
    Oracle中文乱码
    Javascript 编程小技巧总结(部分内容借鉴他人)
    从文档流角度理解浏览器页面渲染引擎对元素定位的解析
    JS重点特性——闭包详解
    用一段JS代码来比较各浏览器的极限内存与运算速度
    前端开发人员需知——浏览器详解
    Js变量定义——fn里 var与不var的区别
    Js文字特效—文字段逐个变色循环
    html5 canvas画图之图形随拖动而复制(有操作指示)
  • 原文地址:https://www.cnblogs.com/justyouadmin/p/12100978.html
Copyright © 2011-2022 走看看