问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

如何将灰色logo变成白色logo？logo只有1张图

头像
盐酥鸡加甘梅粉
    911714

    更新：
    不好意思，没有交代清楚背景，在这里补充一下。
    logo的容器background是白色的，logo是灰色的。

    需求如下：
    1、logo是灰色的，在鼠标hover时，logo背景变为绿色圆形。logo本身变为白色。
    2、限制：后台只能上传一张logo图片（格式不限），所以无法通过2张图片变换达到目的。
    3、已经尝试：

    方法一：

    img{ 
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
}

    方法二：
    grayscale.js

    方法三：
    添加遮罩，hover改变其透明度，这种方式与需求不符。

    前2个方法都只能让彩色图片变为黑白，而无法将灰色图案变为白色图案。
    不知大神们是否有好的方法？不吝赐教

    svgjquerycss3html5css
    阅读 17.1k
    4 个回答
    得票最新
    头像
    Vx_丶
      9411223

      如果图片是png格式的话可以改变颜色

      <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="jquery-2.1.0.js" ></script>
        <style type="text/css">
            #wai{
                width: 100px;
                height: 100px;
                overflow: hidden;
            }
            #nei{
                width: 100%;
                height: 100%;
                position: relative;
                left: -100px;
                background: url(celve.png) no-repeat;    //图片
                background-size: 100px 100px;            //设置背景图片大小
                border-right: 100px solid transparent;
                filter: drop-shadow(orange 100px 0);
            }
        </style>
    </head>
    <body>
        <div id="wai">
            <div id="nei">
            </div>
        </div>
    </body>
</html>
      头像
      LeeZi
        317

        你这里做两层盒子 顶层放图片 底层你做一个灰色的背景啊 当鼠标触碰顶层 盒子就消失了 不就可以了？PS：消失呢！？ 你可以用JQ中的animate去写这段

        头像
        fcheng
          10516

          取个巧，图片外层的添加背景为灰色，当图片hover的时候改变透明度。

          <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            float: left;
            background: #ccc;
        }
        img{
            display: block;
        }
        img:hover{
            filter: gray;
            filter: grayscale(100%);
            opacity: .6;
        }
    </style>
<div><img src="1.jpg"></div>
          头像
          盐酥鸡加甘梅粉
            911714

            由于后台只支持一张图片，所以最后妥协了，没有进行变色处理。

            撰写回答
            你尚未登录，登录后可以
            • 和开发者交流问题的细节
            • 关注并接收问题和回答的更新提醒
            • 参与内容的编辑和改进，让解决方法与时俱进
            推荐问题