CSS 实现图片透明度渐变效果

Posted 2023-04-17

参考技术A

实现图片的透明度渐变效果，效果如下：

先说下我的实现，并没有用什么黑科技，而是通过两层图层堆叠的方式来做的。下面一层就是单纯的 svg 图片，上面覆盖了一层遮罩，并设置遮罩的背景色为蓝色到透明色的从左到右渐变。这样，看上去就是一个图片从右到左渐渐变得透明的效果。

这是我比较粗暴的方法，后来在网上看到一种更加优雅的方式：

大体上差不多，重点是 CSS 的 background-image 属性可以设置多张图片，用逗号隔开 。因为我不知道这个属性有这个能力才会额外加了个渐变透明图层来实现效果。

Android通过Alpha实现渐变效果的几个方法

原理 : 通过改变控制透明度的Alpha值来实现渐变效果

方法一 : 使用XML

    步骤一 : 首先，我们要在res文件夹下的anim文件夹里创建一个.xml文件(这里我创建的是alpha.xml)

    设置开始时透明度为0.0(透明):android:fromAlpha="0.0"

    设置结束时透明度1.0(不透明):android:toAlpha="1.0"

                        

    <alpha

    xmlns:android="http://schemas.android.com/apk/res/android"

    android:fromAlpha="0.0"

    android:toAlpha="1.0"

    android:duration="2000">

    </alpha>

    步骤二 : 接下来就要使用Animation类来实现效果了

    @Override

    protected void onCreate(Bundle savedInstanceState)

    {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.main);

ImageView but=(ImageView)findViewById(R.id.mainButton);

Animation mAnimation = AnimationUtils.loadAnimation(this, R.anim.alpha); 

but.startAnimation(mAnimation);

    }

方法二 : 使用Paint类

    方法 : 通过Paint.setAlpha();改变图的Alpha值

     

public class MainActivity extends Activity implements OnTouchListener{

     Paint paint=new Paint();

     

     //设置初始Alpha为100(不透明)

     int al=100;

   

@Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

setContentView(new RenderView(this));

    }

    class RenderView extends View {

       

        protected void onDraw(Canvas canvas){

                        //获取屏幕长、宽

int height=canvas.getHeight();

int width=canvas.getWidth();

                        //画一个完全填充的红色长方形，并改变Alpha值

paint.setStyle(Paint.Style.STROKE);

paint.setColor(Color.RED);

paint.setAlpha(al--);            //改变Alpha(透明度)值

canvas.drawRect(width/2,2,width/3*2,height/2,paint);

                         invalidate();

}

}

}

本文出自 “12608835” 博客，请务必保留此出处http://12618835.blog.51cto.com/12608835/1920183