zoukankan      html  css  js  c++  java
  • 浅谈background的用法

    div css 背景样式background属性

    一、语法及参数

    1、语法:
    background : background-color(颜色) || background-image(图片地址) || background-repeat(平铺方式) || background-attachment(固定方式) || background-position(定位大小)

    2、background参数:
    background属性是复合属性。通俗说background后值可以设置为多值,包括背景颜色,背景图片等等,以及位置和平铺方式的更改等等。

    二、background写法

    1、整体写

    background:url(图片地址) no-repeat 20px 20px;

    2分开写

    就需要用到background-image:url(图片地址);background-repeat(平铺方式)  background-position(定位)

    三、background详解分析

    css background背景样式结构分析  

    上面(二)中的css进行一个详细的说明

         1>url我就不说了没什么可以说的

         2>平铺方式

             repeat:默认的,背景图像将在垂直方向和水平方向重复。

             repeat-x:背景图像将在水平方向重复,当然y的话就是垂直了

             no-repeat:图片显示一次

             inherit:简单来说的话就是继承父元素的

         3>定位

            上面的20px 20px分别代表的意思是 --------->距左边20px,距上边20px

            接下来第一个20px的位置实际上有三个属性left right center   图片靠左开始显示  靠右 水平居中

            第二个20px位置也有三个属性top bottom center  图片靠上开始显示  靠下 垂直居中

    四、设置背景颜色

    1、背景颜色设置实例CSS代码

          background:red设置背景颜色为红色

    2、承接上面的代码我们可以如下操作

         background:red url(图片地址) no-repeat 20px 20px;

         这段css代码和上面差不多,唯一多的地方就是背景图片显示不到的地方就是用红色代替。

    五、background教程总结

         这个背景看起来还是有那么一点点的复杂,但是只要沉下心来慢慢去学习就会觉得这个就那样,因此好好去学习下,载我们以后遇见复杂的网页时,运用这些知识就会是得心应手了。

  • 相关阅读:
    dede文章插入分页符不起作用,编辑器中出现分页符,导致文章显示不全
    dedecms 图集标签{dede:productimagelist} {dede:field name='imgurls'}&nbs
    dede织梦怎么修改description的字数
    dede 内容页文章标题显示不全的更改方法
    amazon company
    rapleaf
    nope
    数据库事务隔离级别与锁
    nosql=not only sql
    Lustre是开放源代码的集群文件系统
  • 原文地址:https://www.cnblogs.com/dy105525/p/12298983.html
Copyright © 2011-2022 走看看