background

background-color属性表示背景颜色

background-img:表示设置该元素的背景图片

background-imge需要搭配url来一起使用

    <style>
        body{
            background-image:url('./泷泽萝拉.jpg');
         }
    </style>
</head>

 

那么发现默认的背景图片,水平方向和垂直方向都平铺

background-repeat:表示设置该元素平铺的方式

就是对你所设置的背景图进行 设置

属性值:

 

描述
repeat 默认。背景图像将在垂直方向和水平方向重复。
repeat-x 背景图像将在水平方向重复。
repeat-y 背景图像将在垂直方向重复。
no-repeat 背景图像将仅显示一次。就是图片只在背景中出现一个
inherit 规定应该从父元素继承 background-repeat 属性的设置。

给元素设置padding之后,发现padding的区域也会平铺背景图片。

repeat应用案例

还是上面那个超链接导航栏的案例,我们给body设置平铺的图片,注意:一定找左右对称的平铺图片,才能实现我们要的效果

 

background-position: 属性设置背景图像的起始位置。这个属性设置背景原图像(由 background-image 定义)的位置

属性值:

描述
  • top left
  • top center
  • top right
  • center left
  • center center
  • center right
  • bottom left
  • bottom center
  • bottom right

如果您仅规定了一个关键词,那么第二个值将是"center"。

默认值:0 0;

这两个值必须挨在一起。 如果你只设置了一个属性那么就是在中间

 

雪碧图技术(精灵图技术)

CSS雪碧 即CSS Sprite,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分

CSS 雪碧图应用原理:
只有一张大的合并图, 每个小图标节点如何显示单独的小图标呢?

其实就是 截取 大图一部分显示,而这部分就是一个小图标。

使用雪碧图的好处:

1、利用CSS Sprites能很好地减少网页的http请求,从而大大的提高页面的性能,这也是CSS Sprites最大的优点,也是其被广泛传播和应用的主要原因; 
2、CSS Sprites能减少图片的字节,曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。 
3、解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命名就可以了,不需要对每一个小元素进行命名,从而提高了网页的制作效率。 
4、更换风格方便,只需要在一张或少张图片上修改图片的颜色或样式,整个网页的风格就可以改变。维护起来更加方便

 

不足:

1)CSS雪碧的最大问题是内存使用
2)拼图维护比较麻烦
3)使CSS的编写变得困难
4)CSS 雪碧调用的图片不能被打印

 

我们可以使用background综合属性制作通天banner,什么是通天banner呢,就是一般我们电脑的屏幕都是1439.但是设计师给我们的banner图都会比这个大,

那么我们可以此属性来制作通天banner。

background:  red  url('./images/banner.jpg')  no-repeat   center top;

background-attach

设置fixed之后,该属性固定背景图片不随浏览器的滚动而滚动

 

posted @ 2018-05-25 17:08  可爱的红领巾  阅读(482)  评论(0编辑  收藏  举报