CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSS3フィルター効果の操作

CSS3でフィルター効果を設定するには、filterプロパティを使用します。以下のフィルター効果を設定できます-

blur() | brightness() | contrast() | grayscale() | invert() | opacity() | saturate() | url();

以下は、CSS3でフィルター効果を使用するためのコードです-

例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
img{
   margin: 20px;
   width: 200px;
   height: 200px;
}
img.normal{
   margin-left: 30%;
}
img.filter {
   filter: invert(100%);
}
</style>
</head>
<body>
<h1 style="text-align: center;">CSS3 Filter effect example</h1>
<img class="normal" src="https://i.picsum.photos/id/237/536/354.jpg">
<img class="filter" src="https://i.picsum.photos/id/237/536/354.jpg">
</body>
</html>

出力

上記のコードは次の出力を生成します-

CSS3フィルター効果の操作


  1. CSS33D変換関数の操作

    3D変換を使用して、要素をx軸、y軸、およびz軸に移動できます。以下は、CSS33D変換のメソッドの一部です- 以下のメソッドは、3D変換を呼び出すために使用されます- Sr.No。 値と説明 1 matrix3d（n、n、n、n、n、n、n、n、n、n、n、n、n、n、n、n） 行列の16個の値を使用して要素を変換するために使用されます 2 translate3d（x、y、z） x軸、y軸、z軸を使用して要素を変換するために使用されます 3 translateX（x） x軸を使用して要素を変換するために使用されます 4 tr

  2. CSS3で複数の背景を追加する

    複数の背景を追加するには、CSSのbackground-imageプロパティを使用します。以下は、複数の背景を追加するためのコードです- 例 <!DOCTYPE html> <html> <head> <style> body {    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } div {    background-image:    url("https://pngimg