css3 背景_html/css_WEB-ITnose-htmlチュートリアル-php.cn

background は非常に重要な CSS 属性であり、CSS3 には多くの新しいコンテンツが追加されています。元の属性に新しい属性値が追加される一方で、3 つの新しい属性が追加されます。

1. css3 の新しい属性値の紹介

css2 の背景には 5 つの属性があり、略称は次のとおりです:

background:background-color,background-image,background-repeat ,background-attachment, background-position;

ログイン後にコピー

そのうち、background-image、background-repeat、background-position にはすべての属性がありますcss3に新しい属性値を追加しました。

1. 背景画像

css3 の背景画像は複数の背景画像を設定できます。使用法: 背景画像: url()、url()。

複数の背景画像を使用する場合は、次の点に注意する必要があります:

a. 背景画像の順序

複数の背景画像は上から下に配置されます。最上位にあるので、複数の背景画像を追加する場合は、順序と画像の透明度に注意する必要があります。

例:

2 つの div の背景画像は逆の順序で同じです。

<style>div{  width: 200px;  height: 200px;  border: 5px dotted pink;  background-repeat: no-repeat;  display: inline-block;}.bg{  background-image: url(img/bg_flower.gif),url(img/bg_flower_2.gif);}.bg2{  background-image: url(img/bg_flower_2.gif),url(img/bg_flower.gif);}</style></head><body><p>两张背景图：尺寸一样，第一张透明，第二张不透明<p><img src="img/bg_flower.gif"/><img  src="img/bg_flower_2.gif" /><div class="bg"></div><div class="bg2"></div></body>

ログイン後にコピー

分析: 背景画像はレイヤー形式で表示されるため、最初に追加された背景画像は最上位レイヤーにあります。左側の画像では、最初の背景画像が上にあり、透明なので、美しい重なり効果を生み出すことができます。2 番目の画像は、不透明な背景画像が上にあるため、2 番目の画像を覆い、下の画像はできません。見られる。

これは box-shadow に非常に似ています。ボックスに複数の影がある場合、複数の影は上から下に分散され、最初の影が一番上になります。詳細については、「css3 box-shadow」を参照してください。

b、文法上の略語

サイズ値がある場合は、「

、」を使用して背景の各グループの略語値を区切ります。 ;

background ： [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin]<strong>,</strong>...

ログイン後にコピー

注: 省略する場合、背景色を有効にするために最下層のレイヤーに設定する必要があります。他のレイヤーに背景色を追加すると、構文エラーのあるルール全体が無視され、表示されません。

例:

<style>div{  width: 200px;  height: 200px;  border: 5px dotted pink;  display: inline-block;}.bg3{  background: url(img/bg_flower.gif) no-repeat,url(img/bg_flower_2.gif) no-repeat blue;}.bg4{  background: url(img/bg_flower.gif) no-repeat yellow,url(img/bg_flower_2.gif) no-repeat blue;}</style></head><body><p>两张背景图：尺寸一样，第一张透明，第二张不透明<p><img src="img/bg_flower.gif"/><img  src="img/bg_flower_2.gif" /><div class="bg3"></div><div class="bg42"></div></body>

ログイン後にコピー

分析: 上の図の左側、下にbackground-colorが書かれていると有効になります。左から 2 番目の中央では、background-color: yellow が最初のレイヤーに追加されており、ルール全体が無効です。

c、分割記述法

または略語を分割して記述します: 複数の背景画像があり、他の属性が 1 つだけある場合 (たとえば、background-repeat が 1 つだけある)、この属性値が同様にすべての背景画像に適用されます。背景 - 1 つの色のみを設定できます。

background-image:url1,url2,...,urlN;background-repeat : repeat1,repeat2,...,repeatN;backround-position : position1,position2,...,positionN;background-size : size1,size2,...,sizeN;background-attachment : attachment1,attachment2,...,attachmentN;background-clip : clip1,clip2,...,clipN;background-origin : origin1,origin2,...,originN;background-color : <strong>color</strong>;

ログイン後にコピー

d、背景画像とグラデーション

グラデーションの使用法は次のとおりです:background-image:linear-gradient(...); グラデーションは背景画像の特殊なケースであることがわかります。背景画像はコードで生成されます。グラデーションの詳細については、「css3 グラデーションの背景」を参照してください

グラデーションも背景画像なので、背景が複数ある場合にはもちろん使用できます。

.bg5{  background: url(img/bg_flower.gif) no-repeat,linear-gradient(to right,red ,green,blue) no-repeat;}<div class="bg5"></div>

ログイン後にコピー

一般的に、CSS3 で追加された複数の背景画像は、適切な画像を選択して適切に使用すると、驚くべき効果が得られ、予期せぬ効果が得られます。

2. 背景繰り返し

背景画像のタイリングに対応して、1 つ説明する必要があります。デフォルトでは、背景画像は左上隅から開始されますが、X 軸と Y 軸上にタイリングされます。パディングボックスのさまざまな方向が外側を向き、境界領域まで広がります。これは非常に重要であり、バックグラウンド起源の文脈でも後述します。

a、css3 で属性値が 2 つに増えました

css3 では、1 つの値の代わりに 2 つの繰り返しを使用できます。 1 つ目は x 軸、2 つ目は y 軸です。たとえば、background-repeat:repeat no-repeat は、background-repeat:repeat-x; と同等です。

CSS2 で背景画像を繰り返す唯一の方法はリピートです。リピート効果は、数字全体をきれいに配置できない場合、余分な部分がトリミングされます。 CSS3 では、新しいスペースとラウンドの属性値が追加され、繰り返しに基づいて繰り返しのプロセスをより適切に制御し、完璧にすることができます。

b, css3 新しい属性値スペース

背景画像をトリミングせずに水平方向と垂直方向に並べて表示します。両端を揃えて中央の隙間を埋め、背景画像のサイズは変更しないでください。

C および CSS3 の新しい属性値round

トリミングせずに背景画像を水平方向と垂直方向に並べて表示します。ただし、背景画像は伸縮する場合があります。

リピート、スペース、ラウンドの比較例:

もともと適切な小さい画像を見つけたかったのですが、見つからなかったので、例として記事の最後にあるリソースリンクの背景画像を見てみましょう。

元の著者の例はここにあります。

これはこの羊です。元の画像情報:

デモを行ったときにこのような大きな羊を設定しました。この属性は後で紹介します。

コード:

<style>div{  width: 240px;  height: 240px;  border: 1px solid pink;  display: inline-block;  background-image: url(img/sheep.png);  background-size: 100px 100px;  background-color: green;  color: red;}.repeat{  background-repeat: repeat;}.space{  background-repeat: space;}.round{  background-repeat: round;}.round1{  background-repeat: round;  width:250px;}</style><body>  <div class="repeat">repeat</div>  <div class="space">space</div>  <div class="round">round四舍</div>  <div class="round1">round五入</div></body>

ログイン後にコピー

効果:

分析:

まず、div のサイズを 240px*24px に、img のサイズを 100px*100px に設定します。

繰り返しの場合、背景画像は左上隅から x 軸と y 軸に沿って並べられ、背景画像のサイズは変更されず、余分な部分はトリミングされます (図の左 1 を参照)。上の写真。

スペースの場合、240/100=2.4では3枚の写真を保持できません。スペースはトリミングされないため、2に切り捨てられ、x軸とy軸に2つの背景画像があり、両端が揃います。、上の図の左 2 に示すように、残りのスペースは空白になります。

round的情况，round这个词很有意思，它有四舍五入的意思。round(240/100)=round(2.4)=2，所以就容纳2张图片，图片尺寸放大，如上图右2。

如果设定div宽度为250，round(250/100)=round(2.5)=3，所以就容纳3张图片，图片被缩小，如上图右1。

3、background-position

css2中背景只能从左上角定位，css3的background-position增加到四个属性值，可以对四个角都进行定位，而且可以取负值。

background-position取值的关键字有：top left center right bottom

按照取值个数举例来说一下：

a、一个参数

background-position: top;仅给定一个值，那么第二个值将是"center"。

注意一个问题：给一个值，并不一定是设置background-position-x,要根据参数定。left center right自然是设置x轴，top center right是对应y轴。

b、两个参数

background-position:x% y%|x pos y pos|center center。

第一个设置x轴偏移，第二个设置y轴偏移，没什么好说的。

c、三个参数

Note:设置3个或4个参数值时，偏移量前面必须有关键字。就是说形如："10px bottom 20px" ，是错误的，因为10px前面没有关键字。

MDN上background-position: 0px 0px, center;这样的写法显然是错误的。

background-position: right 10px top;设置，水平靠右10px，垂直top。

d、四个参数

background-position:right 10px bottom 10px;设置靠右下角水平垂直10px定位。

二、css3中新增属性介绍

css3中background新增了3个属性:background-origin,background-clip和background-size。

1、background-origin

background-origin用来指定背景图片定位在哪个盒子中。

个人观点：background-origin是background-position的特例。都是表示背景图放哪，background-origin特殊点，决定背景图定位在哪个盒子中，相当于快速定位，你可以先通过background-origin定位到盒子，再通过background-position进行微调。

语法：

background-origin ： border-box | padding-box | content-box;

ログイン後にコピー

默认值：padding-box；

设置背景图片原始起点位置，没什么好说的，只是有几点需要注意：

a、repeat和origin关系

如果背景不是no-repeat，这个属性无效，它会从边框开始显示。这句话是慕课网总结的，我得吐槽一下，背景repeat这个属性是还是有效的。请看下面例子。

<style type="text/css">div{    color: white;    width: 100px;    height: 100px;    border: 20px  dotted pink;    padding:50px;    background-color: yellow;    background-image: url(img/wl.jpg) ;    display: inline-block;    vertical-align: top;}.origin-content{    background-origin: content-box;}.nopeat{    background-repeat: no-repeat;}</style><body><div></div><div class="origin-content nopeat">origin-content nopeat</div><div class="origin-content">origin-content</div></body>

ログイン後にコピー

分析：可见设置repeat时，先通过origin确定图片位置，然后向各个方向朝外平铺，延伸到border区域。在上面background-repeat时就说了：对于背景图的平铺，默认情况，背景图在x轴和y轴平铺，尽管起始于padding-box左上角，但是其各个方向朝外平铺，延伸到border区域。现在origin只是改变了起始位置，

b、fixed和origin关系

如果background-attachment属性设置为"fixed"，background-origin将不起作用。

这个很好理解，因为fixed是相对于视口定位的，一个网页只有一个视口，如果不理解请看《background-attachment属性》

2、background-clip

背景区域中背景图片裁剪的位置。

语法：

background-clip ： border-box | padding-box | content-box | no-clip;

ログイン後にコピー

默认值：border-box。

如果理解比较抽象，就关注背景颜色，如果background-clip为content，背景颜色就不会填充padding和border，因为被裁剪掉了。

<style type="text/css">p {   border: 10px navy;   border-style: dotted double;   margin: 1em;   padding: 1em;   background: #F8D575; } .bb{  background-clip: border-box; } .pb{  background-clip: padding-box; } .cb{  background-clip: content-box; }</style><body><p class="bb">内容background-clip: border-box;</p><p class="pb">内容background-clip: padding-box;</p><p class="cb">内容background-clip: content-box;</p></body>

ログイン後にコピー

3、background-size

css3新增了background-size允许背景图被拉伸或者压扁。在响应式设计里很有用。

语法：

background-size: auto | <长度值> | <百分比> | <strong>cover</strong> | <strong>contain</strong>

ログイン後にコピー

参数：

auto:默认值，不改变背景图片的原始高度和宽度。

<长度值>：成对出现如200px 50px,将背景图片宽高依次设置为前面两个值；当设置一个值时，将其作为图片宽度值，高度被设置为"auto"，且高度等比缩放。

<百分比>：0%~100%之间的任意值，将背景图片宽高依次设置为所在元素宽高【并不是图片默认的宽高】乘以前面百分比得出的数值，一个值时，高度等比缩放。

cover:覆盖，将背景图片等比缩放以填满整个容器。类似桌面背景中的平铺。就是把图片按比例扩展至足够大，以使背景铺满盒子，如果图片和容器的长宽比不同的话，背景图像的某些部分可能无法显示出来。

contain:容纳，即将背景图片等比缩放至容器的宽或高被填充满。有可能把图像放大后，依然铺不满盒子。

网上很多cover和contain的例子，但是讲的很不明白。下面我举个例子说明一下。

对比cover和contain举例：

<style>div{  width: 150px;  height: 60px;  border: 1px solid pink;  display: inline-block;  background-image: url(img/bg.png);  background-color: green;  vertical-align: top;  background-repeat: no-repeat;}.cover{  background-size: cover;}.contain{  background-size: contain;}</style><body><img src="img/bg.png">原始图片尺寸：100px*50px<br/><br/><div class="cover"></div>div尺寸：150px*60px;            <div style="width:150px;height:75px;background-size:cover;"></div>cover对应图片尺寸：150px*75px;<br/><br/><div class="contain"></div>div尺寸：150px*60px;            <div style="width:120px;height:60px;background-size:contain;"></div>contain对应图片尺寸：120px*60px;<h3>背景图片大小计算方法：</h3><h4>即cover和contain等比缩放比例的计算：</h4><p>150/100=1.5;60/50=1.2</p><p>cover取大，放大1.5倍。width:150px;height:75px;</p><p>contain取小，放大1.2倍。width:120px;height:60px;</p></body>

ログイン後にコピー

所以我个人觉得在使用cover和contain时把握住本质就是确定缩放比例，而不要去记忆那些复杂的规则。

三、资源链接

background-clip

background-size

new repeating background image options in css3

how to resize background images with css3

w3c background shorthand