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

CSSのBackgroundShorthandプロパティ

CSS背景省略形プロパティは、要素の背景を定義するために使用されます。 background-color、background-image、background-repeat、background-position、background-clip、background-size、background-origin、background-attachmentが一緒になって、CSSの背景プロパティを構成します。

構文

CSSバックグラウンドプロパティの構文は次のとおりです-

Selector {
   background: /*value*/
}

例

次の例は、CSSの背景プロパティ-

を示しています。 
<!DOCTYPE html>
<html>
<head>
<style>
body {
   background: linen url("https://www.tutorialspoint.com/images/library-sub-banner.jpg") no-repeat 40% 20%;
}
div {
   padding: 100px;
   background: rgba(50,100,50,0.4)url("https://www.tutorialspoint.com/green/images/logo.png") no-repeat left;
}
</style>
</head>
<body>
<h2>Learn</h2>
<ul>
<li>Java</li>
<li>C#</li>
<li>Android</li>
<li>iOS</li>
<li>C++</li>
<li>C</li>
</ul>
<div></div>
</body>
</html>

出力

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

CSSのBackgroundShorthandプロパティ

例

<!DOCTYPE html>
<html>
<head>
<style>
table, tr,td{
   margin: auto;
   border: 2px solid red;
   padding: 40px;
}
td {
   background: rgba(50,100,50,0.4)url("https://www.tutorialspoint.com/images/blockchain.png") no-repeat;
}
#demo {
   background: rgba(50,100,50,0.4)url("https://www.tutorialspoint.com/images/reactjs.png") no-repeat;
}
table {
   background: ivory url("https://www.tutorialspoint.com/images/library-sub-banner.jpg") no-repeat center;
}
</style>
</head>
<body>
<h2>Learning is fun</h2>
<table>
<tr><td></td></tr>
<tr><td id="demo"></td></tr>
</table>
</body>
</html>

出力

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

CSSのBackgroundShorthandプロパティ


  1. CSSのborder-colorプロパティ

    CSSのborder-colorプロパティは、要素の境界線の色を指定するために使用されます。また、border-top-color、border-right-color、border-left-color、border-right-colorプロパティを使用して、個々の辺の色を設定することもできます。 構文 CSSborder-colorプロパティの構文は次のとおりです- Selector {    border-color: /*value*/ } 次の例は、CSSのborder-colorプロパティ-を示しています。 例 <!DOCTYPE html>

  2. CSSのborder-styleプロパティ

    CSS border-styleプロパティは、要素の境界線スタイルを指定するために使用されます。また、border-topスタイル、border-rightスタイル、border-leftスタイル、border-rightスタイルのプロパティを使用して、個々の辺の境界線スタイルを定義することもできます。 構文 CSSボーダープロパティの構文は次のとおりです- Selector {    border: /*value*/ } 次の例は、CSSボーダースタイルのプロパティ-を示しています。 例 <!DOCTYPE html> <html> <