CSS 基本チュートリアルの背...LOGIN

CSS 基本チュートリアルの背景プロパティ

CSS 背景プロパティ

  • background-color: 背景色。

  • background-image: 背景画像のアドレス。例:background-image:url(images/bg.gif)

  • background-repeat: 背景のタイリング方法、値: no-repeat (タイリングなし)、repeat-x (水平方向)、repeat- y (縦方向)

  • background-position: 背景の位置。形式: 背景位置: 水平位置 垂直位置;

  • 位置を指定するには英語の単語を使用します。

  • 固定値の位置を使用します。 Position: 50px 50px; //背景はコンテナの左側から 50 ピクセル、コンテナの上から 50 ピクセルの位置を使用します。 positioning:background-position:left 10px; //背景はコンテナの上から10px左に揃えられます

  • 略語

    background:背景色、背景画像、タイリング方法、配置方法;
  • 例: 背景: url(images/bg.gif) 繰り返しなし 中央 中央;
  • 例: 背景: #ccc url(images/bg.gif) 繰り返しなし 左 10px ;
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>php.cn</title> <style type="text/css"> .box1{ background-color:#f0f0f0; width:400px; } .box2{ background-image:url(http://img1.imgtn.bdimg.com/it/u=1182781053,1047826690&fm=21&gp=0.jpg); background-repeat:no-repeat; background-position:center center; width:400px; height:400px; } </style> </head> <body> <div class="box1"> <h1>习近平心中的互联网</h1> <p>互联网是20世纪最伟大的发明,它正在将人类“一网打尽”,人们在不知不觉中已经融入了互联网生态,互联网让世界变成了“鸡犬之声相闻”的地球村。</p> </div> <div class="box2"> </div> </body> </html>
コースウェア