Question

我一直试图让我的文字淡出。我已经尝试了一些我在互联网上找到的代码，但它们似乎只适用于块元素。
如何使其工作？
这是我想要得到的： enter image description here

哦，我不想要Internet Explorer支持。

最好的问候，MarioErmando

Answer 1

没关系，我找到了自己的解决方案。

blablablabla<span class="readmore">blablablabla</span>

.readmore {
-webkit-mask-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 40%);
}

不幸的是，只适用于webkit。

Answer 2

以下是Fiddle Example，您可以尝试这样做。

HTML

<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vestibulum massa     nec mi porta ut dictum dolor consectetur. Nunc imperdiet fermentum mauris, aliquam rhoncus magna suscipit eget. Cras neque velit, posuere ut pulvinar eu, faucibus sit amet tellus. Nullam sed orci tempus risus commodo commodo.</li>
</ul>

CSS

body {
font-family: 'Lucida Grande', 'Helvetica Neue', sans-serif;
font-size: 13px;
 }

 ul { margin: 20px; padding: 0; }

 li {
position: relative;
overflow: hidden;
white-space: nowrap;
background-color: #fff;
 }
 li:after {
content: "";
pointer-events: none;
position: absolute;
width: 100px;
height: 100%;
top: 0; right: 0;

background-image: -webkit-linear-gradient(right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
background-image: -moz-linear-gradient(right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
background-image: -ms-linear-gradient(right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
background-image: -o-linear-gradient(right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
background-image: linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
 }

 /*
 This piece of code works great too, but only on Webkit Browsers!
 li {
color: white;
position: relative;
overflow: hidden;
white-space: nowrap;
-webkit-mask-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 1) 85%, rgba(0, 0, 0, 0) 100%);
 }
 */

Answer 3

对于 Google员工，这是我在搜索互联网后想出的一个简单的通用解决方案。

.excerpt {
  position: relative;
}

.excerpt::before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  background: linear-gradient(to bottom, transparent, white);
}

您可以使用linear-gradient的参数来获得不同的结果，例如to right或transparent 25%。

Try the Fiddle.

Answer 4

对于来自这里的人来说， CSS4 可能已经包括：

  public class view extends SurfaceView implements    
  Runnable {

volatile boolean playing;
private Thread gameThread = null;
private king myKing;
private Paint paint;
private Canvas canvas;
private SurfaceHolder surfaceHolder;
private lebel myLebel;
private fire myFire;
private worldking peace;
int screenX;
int countCollisions;

boolean flag ;
int i;
private boolean isGameOver ;
private boolean congrats;
int score;
int highScore[] = new int[4];
SharedPreferences sharedPreferences;

 public view(Context context, int screenX, int screenY) {
    super(context);
    myKing = new king(context, screenX, screenY);
    surfaceHolder = getHolder();
    paint = new Paint();
    myLebel = new lebel(context, screenX, screenY);
    myFire = new fire(context);
    peace = new worldking(context, screenX, screenY);
    this.screenX = screenX;
    countCollisions = 0;
    isGameOver = false;
    congrats= false;
    score = 0;
 }

 @Override
 public void run() {
    while (playing) {
        update();
        draw();
        control();
    }
  }


   private void update() {
    score++;
    myKing.update();
    myFire.setX(-250);
    myFire.setY(-250);
    if (myLebel.getX() == screenX) {
        flag = true;
    }
    myLebel.update(myKing.getSpeed());
    if (Rect.intersects(myKing.getDetectCollision(), 
     myLebel.getDetectCollision())) {
        myFire.setX(myLebel.getX());
        myFire.setY(myLebel.getY());
        myLebel.setX(-200);
    }
        peace.update(myKing.getSpeed());
        if (Rect.intersects(myKing.getDetectCollision(), 
      peace.getDetectCollision())) {

            myFire.setX(peace.getX());
            myFire.setY(peace.getY());
            playing = false;
            isGameOver = true;
            myLebel.setX(-200);
        }
     }
    private void draw() {

     if (surfaceHolder.getSurface().isValid()) {
        canvas = surfaceHolder.lockCanvas();
        canvas.drawColor(Color.BLACK);
        paint.setTextSize(30);
        paint.setColor(WHITE);
        canvas.drawText("SCORE:"+score,100,50,paint);
        canvas.drawBitmap(
                myKing.getBitmap(),
                myKing.getX(),
                myKing.getY(),
                paint);
            canvas.drawBitmap(
                    myLebel.getBitmap(),
                    myLebel.getX(),
                    myLebel.getY(),
                    paint
            );
        canvas.drawBitmap(
                myFire.getBitmap(),
                myFire.getX(),
                myFire.getY(),
                paint
        );
        canvas.drawBitmap(

                peace.getBitmap(),
                peace.getX(),
                peace.getY(),
                paint
        );
        if(isGameOver){
            paint.setTextSize(100);
            paint.setColor(WHITE);
            paint.setTextAlign(Paint.Align.CENTER);
            int yPos=(int) ((canvas.getHeight() / 2) - 
        ((paint.descent() + paint.ascent()) / 2));
            canvas.drawText("Oops! Try 
          Again !",canvas.getWidth()/2,yPos,paint);
        }
        surfaceHolder.unlockCanvasAndPost(canvas);
    }
    }

   private void control() {
    try {
        gameThread.sleep(17);
    } catch (InterruptedException e) {
        e.printStackTrace();
    }
    }

   public void pause() {
    playing = false;
    try {
        gameThread.join();
    } catch (InterruptedException e) {
    }
    }

    public void resume() {
    playing = true;
    gameThread = new Thread(this);
    gameThread.start();
    }

https://drafts.csswg.org/css-ui-4/#text-overflow

https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

2017年的问候。

CSS3淡出文本

4 个答案:

HTML

CSS