SCC3中filter的運用

2021-10-02 13:14:23 字數 3216 閱讀 3545

在設定img時,可以通過filter屬性為設定濾鏡,他有多個屬性值,可以將一張設定成多種不同的形式

屬性值在figure標籤內的img標籤新增兩個路徑,執行網頁看到效果

原始figcaption

>

figure

>

"t">

src=

"***.png"

alt="android"

>

>

濾鏡效果figcaption

>

figure

>

div>

opacity:type

="range"

min="0"

max="100"

value

="100"

oninput

="document.getelementbyid('t').style.filter = 'opacity(' + this.value + '%)';"

>

p>

blur:type

="range"

min="0"

max="20"

value

="0"

oninput

="document.getelementbyid('t').style.filter = 'blur(' + this.value + 'px)';"

>

p>

brightness:type

="range"

min="0"

max="300"

value

="100"

oninput

="document.getelementbyid('t').style.filter = 'brightness(' + this.value + '%)';"

>

p>

contrast:type

="range"

min="0"

max="300"

value

="100"

oninput

="document.getelementbyid('t').style.filter = 'contrast(' + this.value + '%)';"

>

p>

drop-shadow:type

="range"

min="0"

max="20"

value

="0"

oninput

="document.getelementbyid('t').style.filter = 'drop-shadow(' + this.value + 'px ' + this.value + 'px 1px rgba(255,0,0,0.5))';"

>

p>

grayscale:type

="range"

min="0"

max="100"

value

="0"

oninput

="document.getelementbyid('t').style.filter = 'grayscale(' + this.value + '%';"

>

p>

hue-rotate:type

="range"

min="0"

max="360"

value

="0"

oninput

="document.getelementbyid('t').style.filter = 'hue-rotate(' + this.value + 'deg)';"

>

p>

invert:type

="range"

min="0"

max="100"

value

="0"

oninput

="document.getelementbyid('t').style.filter = 'invert(' + this.value + '%)';"

>

p>

saturate:type

="range"

min="0"

max="300"

value

="100"

oninput

="document.getelementbyid('t').style.filter = 'saturate(' + this.value + '%)';"

>

p>

sepia:type

="range"

min="0"

max="100"

value

="0"

oninput

="document.getelementbyid('t').style.filter = 'sepia(' + this.value + '%)';"

>

p>

body

>

html

>

執行,拖動滾動條即可看到想要設定的屬性值的效果

C 中如何運用Filter過濾器

場景 需要記錄日誌 許可權驗證 異常捕獲,如果讓 不再重複編寫 封裝 public class myactionfilterattribute actionfilterattribute request,logcategory.getrequest.getenumdesc filter1 trace...

css3中filter的各種特效

css3中的filter屬性可以說是簡單易用且強大,這些效果作用在上實現一些特效 也可以作用在vidio上,此處只討論特效 瀏覽器相容性 目前各大瀏覽器對於css3的相容已經非常好了,最新版本都可以支援css3,老版本的ie9以下的還是不支援,不過這不是重點,微軟都準備放棄這些老古董了。另外ie的濾...

棧的運用(3)

問題描述 試寫乙個判別表示式中開,閉括號是否配對出現的演算法 問題分析 這道題很簡單,表示式存入陣列中,判斷,開,閉括號的個數相等,但是也要注意順序,你不能出現這樣的情況 這個就不是正確的表示式了,也就是說兩個匹配的操作符之間不能有其他的操作符。想到昨天做的簡答題,把運算子入棧再去判斷。int ma...