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

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

CSSのbackground-repeatプロパティは、背景画像がどのように繰り返されるかを定義するために使用されます。

構文

CSSbackground-repeatプロパティの構文は次のとおりです-

Selector {
   background-repeat: /*value*/
}

例

次の例は、CSSのbackground-repeatプロパティ-

を示しています。 
<!DOCTYPE html>
<html>
<head>
<style>
body {
   background-image: url("https://www.tutorialspoint.com/images/microsoftproject.png");
   background-repeat: repeat;
}
</style>
</head>
<body>
</body>
</html>

出力

これにより、次の出力が得られます-

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

例

<!DOCTYPE html>
<html>
<head>
<style>
ul {
   background-image: url("https://www.tutorialspoint.com/images/questions-answers.png");
   background-repeat: space repeat;
}
</style>
</head>
<body>
<h2>Tutorials</h2>
<ul>
<li>Java</li>
<li>C#</li>
<li>Etherum</li>
<li>DBMS</li>
<li>OS</li>
</ul>
</body>
</html>

出力

これにより、次の出力が得られます-

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


  1. RGBAを使用したCSSの透明性

    CSSの透過性にはRGBA（）値を使用します。アルファチャネルパラメータを設定して、色の不透明度を指定します。 以下は、RGBAを使用してCSS透過性を実装するためのコードです- 例 <!DOCTYPE html> <html> <head> <style> body {    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } div {    width: 200px;    heigh

  2. CSSでのデータ属性（data- *）の使用

    data- *属性を使用して、要素に関する追加情報を格納できます。次の例は、CSSデータ-*属性を示しています。 例 <!DOCTYPE html> <html> <head> <style> dl {    margin: 2%; } p {    width: 60%;    background-color: lightgreen;    padding: 2%;    color: white;    text-alig