在設定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...