CSS_html/css_WEB-ITnose の画像 (背景) のいくつかの設定の概要

Web ページを作成するときに、写真を操作する必要がある状況がたくさんあります。プロによるアートのカット操作を行わずに、どうすれば素材に最大限の満足感を得ることができるでしょうか。これは、開くのが面倒な人にとっては問題です。 PS を使用して画像を切り取る場合、私は通常、画像を直接インターネットからダウンロードして HTML に直接ドラッグします。これは、一部のスタイル属性を常に覚えておらず、調整することができないためです。画像のクリック アイデアを載せるために毎回 Baidu を検索しなければならなかったのですが、何度か面倒になったので、CSS 内の画像に関するいくつかの属性設定を特別に整理し、次回のタイムリーなレビューのためにここに置きました。 ):

css2の背景のプロパティは以下のとおりです:

background-color: 画像が必要なく、単色の背景だけが必要な場合に使用します。直接使用することもできます

　　　　　　background：#eee;

background-image:

　　backgroud-image：url("img/bg.jpg");

などの背景として画像を引用します

background-position: 要素の背景画像の位置を指定することに慣れていない人も多いです。これを使用しても、実際には非常に便利です。画像の左上隅は、要素の左上隅に対応します。

background-position: 0 0;//第一个数字代表x轴水平位置，第二个数字代表y轴垂直位置background-position: 0 100px;

　　当你的元素尺寸不适用像素设置的时候，还可以使用其他数值，如

を使用できます。

　　 background-position: top right; // 图片的top对应元素的top 图片的right对应元素的right　　 background-position:  100% 50%; //使用元素的百分比数值设置图片位置，道理同上

background-repeat: 背景画像を繰り返すかどうかを決定します。値は次のとおりです:

 background-repeat: repeat;       //图片可重复 background-repeat: no-repeat ; //图片不可重复 background-repeat: repeat-x;    //图片在x轴上可以重复 background-repeat: repeat-y;    //图片在y轴上可以重复 background-repeat: inherit;       //遵从父元素的设置 

background-attachment: 背景画像がページとともにスクロールするかどうかを決定します。値は次のとおりです。

background-attachment: scroll; //默认值;表示背景紧贴元素background-attachment: fixed;  //背景不随元素滚动，当页面向下时，背景待在最初相对于浏览器的位置background-attachment: inherit;//遵循父元素的设定

背景の属性を複数設定したいときは、それぞれ個別に設定することもできますし、1行にまとめて1つの属性で記述することもできます Li: r

r r

CSS3ではたくさんの属性が追加されます背景:

背景色、画像のサイズを設定します。いくつかの値があります:

　　background: transparent url(image.jpg) 50% 0 scroll repeat-y;

E

背景クリップ、背景トリミング、背景の表示位置を制御する良い方法: 値are:

  background-size: contain;     //缩小图片以适应元素的尺寸（图片宽高比不变）  background-size: cover;       //扩展图片以填满元素（图片宽高比不变）  background-size: 50% 100%;    //自定义调整图片大小 

background-breakとbackground-originという2つの属性もありますが、私はネットの説明を見てあまり役に立たないと思ったので書きません。読者を誤解させるためにここに記載します。

CSS の背景に関する知識ポイントはまだ非常に広範囲で奥が深いです。将来新たに理解した場合は、ここでさらに追加することができます。

注: 記事参照》》》》http://blog.csdn.net/adenfeng/article/details/8199362