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

CSSを使用した要素の背景のスタイリング

要素の背景のスタイルを設定するには、背景画像、背景位置を設定できます。それで、背景の繰り返しを設定して、画像を水平または垂直に繰り返します。

背景位置

背景位置とは、背景画像の開始位置を設定することです。これには、background-positionプロパティを使用します。

例

例を見てみましょう-

<!DOCTYPE html>
<html>
<head>
<style>
body {
   background-image: url("https://www.tutorialspoint.com/images/Swift.png");
   background-repeat: no-repeat;
   background-attachment: fixed;
   color: blue;
   background-position: left center;
}
.demo {
   text-decoration: overline underline;
}
</style>
</head>
<body>
<h1>Details</h1>
<p class="demo">Examination Center near ABC College.</p>
<p class="demo2">Exam begins at 9AM.</p>
</body>
</html>

出力

CSSを使用した要素の背景のスタイリング

バックグラウンドリピート

CSSの背景の繰り返しは、Webページで背景画像を繰り返す方法を設定するために使用されます。これには、background-repeatプロパティを使用します。以下は、プロパティ値にすることができます-

background-repeat: repeat|repeat-x|repeat-y|no-repeat|initial|inherit;

例

例を見てみましょう-

<!DOCTYPE html>
<html>
<head>
<style>
body {
   background-image: url("https://www.tutorialspoint.com/images/Swift.png");
   background-repeat: repeat-x;
   background-color: blue;
   color: white;
}
.demo {
   text-decoration: overline underline;
}
</style>
</head>
<body>
<h1>Details</h1>
<p class="demo">Examination Center near ABC College.</p>
<p class="demo2">Exam begins at 9AM.</p>
</body>
</html>

出力

CSSを使用した要素の背景のスタイリング


  1. CSSを使用して要素をZ-Indexとオーバーラップさせる

    CSS Z-Indexプロパティの開発者は、要素を相互にスタックできます。 Z-Indexには、正の値または負の値を指定できます。 注 −重複する要素にz-indexが指定されていない場合、その要素はドキュメントの最後に記載されている要素として表示されます。 例 z-indexプロパティの例を見てみましょう- <!DOCTYPE html> <html> <head> <style> p {    margin: 0;    position: absolute;    to

  2. CSSを使用して背景を繰り返す

    CSSのbackground-repeatプロパティは、背景画像がどのように繰り返されるかを定義するために使用されます。 構文 CSSbackground-repeatプロパティの構文は次のとおりです- Selector {    background-repeat: /*value*/ } 例 次の例は、CSSのbackground-repeatプロパティ-を示しています。 <!DOCTYPE html> <html> <head> <style> body {    background-image