资源图片阴影

2024-03-19 21:01:28

<html>
<head>
<title>demo</title>
<style>
.nav {
    width:60px;
    height:60px;
    position: relative;
    background-color: #fff;
    padding: 20px;
    transition: 0.5s;
    border-radius: 80px;
    overflow: hidden;
    box-shadow: 0 8px 15px rgba(0,0,0,.2);
    background: url(data:image;base64,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) ;
    background-size: contain;
    background-position:50% 50%;
    background-size: contain;
    background-repeat:no-repeat;
}
</style>
</head>
<body>
    <div class="nav"></div>
</body>
</html>

显示效果图如下：

1.图片背景阴影

<html>
    <head>
        <title>demo</title>
        <style>
            .nav {
                width: 80px;
                height: 80px;
                position: relative;
                background-color: #fff;
                padding: 20px;
                transition: 0.5s;
                border-radius: 80px;
                overflow: hidden;
                box-shadow: 0 8px 15px rgba(0, 0, 0, .2);
                background-position: 50% 50%;
                background-repeat: no-repeat;
            }
        </style>
    </head>
    <body>
        <div class="nav" id="logo1"></div>
        <script type="text/javascript">
            window.onload = function() {
                var canvas = document.createElement('canvas');
                var context = canvas.getContext('2d');
                var base64Img =
                    "data:image;base64,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";
                document.getElementById('logo1').style.backgroundImage = "url(" + base64Img + ")";
                var img = new Image();
                img.src = base64Img;
                img.onload = function() {
                    context.drawImage(img, 0, 0);
                    let imgData = (context.getImageData(0, 0, img.width, img.height)).data;
                    console.log("imgData:",imgData)
                    //取(0,0)的色值
                    var alpha = Math.round(imgData[3] / 255 * 100) / 100;
                    if (imgData[3] == 255) { //没有alpha值
                        var hex = gethex(imgData[0], imgData[1], imgData[2]);
                        document.getElementById('logo1').style.backgroundColor = hex;
                    } else if (alpha > 0) { //有alpha值 
                        var rgba = imgData[0] + ',' + imgData[1] + ',' + imgData[2] + ',' + alpha;
                        document.getElementById('logo1').style.backgroundColor = 'rgba(' + rgba + ')';
                    }

                }
            }
            // 获取16进制颜色
            function gethex(r, g, b) {
                r = r.toString(16);
                g = g.toString(16);
                b = b.toString(16);
                r.length == 1 ? r = '0' + r : '';
                g.length == 1 ? g = '0' + g : '';
                b.length == 1 ? b = '0' + b : '';
                var hex = r + g + b;
                if (r.slice(0, 1) == r.slice(1, 1) && g.slice(0, 1) == g.slice(1, 1) && b.slice(0, 1) ==
                    b.slice(1, 1)) {
                    hex = r.slice(0, 1) + g.slice(0, 1) + b.slice(0, 1);
                }
                return hex;
            }
        </script>
    </body>
</html>

　　显示效果图：

码农公寓

相关文章