本文介绍了在div结束附近淡化文本?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

可以使用CSS在div的结尾附近水平淡化文本。

Is it possible to fade the text horizontally near the end of the div using the CSS.

例如:

推荐答案

CSS渐变和 rgba 将为此

(更新)

div {
    position: relative;
    display: inline-block;
}

div span {
    display: block;
    position: absolute;
    height: 80px;
    width: 200px;    
    right: 0;
    background: linear-gradient(to right, rgba(255,255,255,.6) 30%,rgba(255,255,255,1) 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,.6)), color-stop(100%,rgba(255,255,255,1)));
    background: -webkit-linear-gradient(left, rgba(255,255,255,.6) 30%,rgba(255,255,255,1) 100%);
    top: 0;

}

关于 rgba()它最近在CSS3规范中介绍,其中我希望你知道什么是RGB代表和 a 代表alpha, code> HEX 我使用 RGBA ,我只是在这里使用alpha部分

About the rgba() it's introduced recently in CSS3 spec, where I hope you know what RGB stands for and a stands for alpha, so instead of using HEX I am using RGBA and am just playing with the alpha part here

这篇关于在div结束附近淡化文本?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

10-27 07:38