background背景

- background-color:背景颜色

{
background-color:#333333;
}
{
background-color:rgb(255 255 255);
}
{
background-color:gray;
}
 css中颜色表示法:
    1.单词表示法
    2.十六进制表示法 
         0 1 2 3 4 5 6 7 8 9 a b c d e f
         #ffffff
    3.rgb三原色表示法:rgb(255 255 255);
    取值范围:0~255
    提取颜色的下载地址:https://www.baidufe.com/fehelper

- background-image:背景图片 (不用引号)

background-image: url(背景地址)
{
background-image:url(../images/position.png);
}

- background-repeat:背景图片的平铺方式

{background-repeat:no-repeat/repeat/repeat-x/repeat-y }
默认:会水平垂直都铺满
  repeat-x
  repeat-y
  repeat (x,y都进行平铺)
  no-repeat(都不平铺)

- background-position:背景图片的位置

{
background-position:x y;
}

 第一个值为水平方向上的对齐方式
 第二个值为垂直方向上的对齐方式

用单词时:(水平方向) x:left 、center 、right
         (垂直方向) y:top、 center、 bottom
         如果仅规定了一个关键词,那么第二个值将是"center"。
        left top
		left center
		left bottom
		right top
		right center
		right bottom
		center top
		center center
		center bottom
用数值时: 
      x、y都为正值时,往右往下移动
      左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。
      仅规定了一个值,另一个值将是50%。
用百分比时:
     x% y%
      如果仅规定了一个值,另一个值将是50%。
      左上角是 0% 0%。右下角是 100% 100%。


      
           

练习示例:
在这里插入图片描述
代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 306px;
        }
       p{
            width: 100px;
            height: 100px;
            border: 1px dashed gray;
            float: left;
            margin: 0;
       }
       p:nth-child(1){background-image:url(../images/position.png);}
       p:nth-child(2){background:url(../images/position.png) -100px 0px;}
       p:nth-child(3){background:url(../images/position.png) -200px 0px;}
       p:nth-child(4){background:url(../images/position.png) 0px -100px;}
       p:nth-child(5){background:url(../images/position.png) -100px -100px;}
       p:nth-child(6){background:url(../images/position.png) -200px 100px;}
       p:nth-child(7){background:url(../images/position.png) 0px -200px;}
       p:nth-child(8){background:url(../images/position.png) -100px -200px;}
       p:nth-child(9){background:url(../images/position.png) -200px -200px;}
       p:nth-child(10){background:url(../images/position.png) 0px -300px;}
       p:nth-child(11){background:url(../images/position.png) -100px -300px;}
       p:nth-child(12){background:url(../images/position.png) -200px -300px;}
    </style>
</head>
<body>
 <div>
     <p></p>
     <p></p>
     <p></p>
     <p></p>
     <p></p>
     <p></p>
     <p></p>
     <p></p>
     <p></p>
     <p></p>
     <p></p>
     <p></p>
 </div>
</body>
</html>

- background-attachment:背景图随滚动条的移动方式

scroll 默认值 背景图像会随着页面其余部分的滚动而移动。
fixed 当页面的其余部分滚动时,背景图像不会移动。
如果设置background-position:50% 50%;设置scroll背景图的位置就在块元素的中央,如果设置为fixed背景图就在浏览器的中央。

背景属性的缩写语法:


书写格式
background : background-color background-image background-repeat background-attachment background-position;

默认值
background: transparent none repeat scroll 0% 0%;
(透明 / 无背景图片 / 平铺 / 背景图片随文本滚动 / 位于元素左上角)

复合样式与单一样式尽量不要混写,如果非要混写,那么一定要先写复合样式再写单一样式。
如果复合在单一后面,复合会把单一样式覆盖掉。

- 网页上常用的图片格式(压缩图片)

1)jpg :有损压缩格式,靠损失图片本身的质量来减小图片的体积,适用于颜色丰富的图像;(像素点组成的,像素点越多会越清晰 )如果网页中

2)gif:有损压缩格式,靠损失图片的色彩数量来减小图片的体积,支持透明,支持动画,适用于颜色数量较少的图像;

3)png:有损压缩格式,损失图片的色彩数量来减小图片的体积,支持透明,不支持动画,是fireworks的 源文件格式,适用于颜色数量较少的图像;

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 1024 设计师:上身试试 返回首页