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

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.com/uploads/autumn_leaves/autumn_leaves_PNG3613.png"),
   url("https://i.picsum.photos/id/256/1200/300.jpg");
   background-position: left bottom, left top;
   background-repeat: repeat, repeat;
   padding: 15px;
}
p {
   font-size: 18px;
}
</style>
</head>
<body>
<h1>Multiple Backgrounds using CSS</h1>
<div>
<h1>Some Sample Text</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem, ipsum
dolorem? Adipisci accusantium eveniet necessitatibus beatae est, dolorum
nobis minima aliquam atque id at sapiente culpa, alias nulla rem.
Aliquam, modi repellendus fugiat dolore, blanditiis praesentium quam
doloribus possimus doloremque reprehenderit corporis enim distinctio,
ducimus nisi. Voluptatum vel repudiandae omnis.
</p>
</div>
</body>
</html>

出力

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

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


  1. CSS32D変換関数の操作

    2D変換は、平行移動、回転、拡大縮小、傾斜などの要素構造を再変更するために使用されます。 以下は、2D変換関数の一部です- Sr.No。 値と説明 1 matrix（n、n、n、n、n、n） 6つの値を持つ行列変換を定義するために使用されます 2 translate（x、y） x軸とy軸とともに要素を変換するために使用されます 3 translateX（n） x軸とともに要素を変換するために使用されます 4 translateY（n） y軸とともに要素を変換するために使用されます 5 scale（x、y） 要

  2. 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