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教程总结

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

浅谈background的用法的更多相关文章

  1. 浅谈localStorage的用法

    今天接到一个任务,说是让自动调节textarea标记的输入高度,而且还要记录下来,下次登录的时候还是调节后的高度,我第一时间就想到了localStorage的用法,直接代码献上: <html l ...

  2. Linux之浅谈VIM常见用法及原理图

    本次归纳以强大的VIM文本处理工具常见用法去展开论述. 文本编辑种类:       行编辑器:sed       全屏编辑器:nano,vi        vim - Vi改进 其他编辑器:     ...

  3. 浅谈intval()函数用法

    <? } } 总结:intval()函数功能1.参数一定是数字否则会报错,2.如果是数字那一定是整数,如果有小点,那会省略掉,3,强调参数可以有“-”值.4.参数第一位不应为0开头,不然会自动转 ...

  4. 浅谈AutoResetEvent的用法

    using System;using System.Threading; namespace AutoResetEvent_Examples{    class MyMainClass    {    ...

  5. 浅谈Task的用法

    Task是用来实现多线程的类,在以前当版本中已经有了Thread及ThreadPool,为什么还要提出Task类呢,这是因为直接操作Thread及ThreadPool,向线程中传递参数,获取线程的返回 ...

  6. 浅谈Python在信息学竞赛中的运用及Python的基本用法

    浅谈Python在信息学竞赛中的运用及Python的基本用法 前言 众所周知,Python是一种非常实用的语言.但是由于其运算时的低效和解释型编译,在信息学竞赛中并不用于完成算法程序.但正如LRJ在& ...

  7. 浅谈@RequestMapping @ResponseBody 和 @RequestBody 注解的用法与区别

    浅谈@RequestMapping @ResponseBody 和 @RequestBody 注解的用法与区别 Spring 2.5 版本新增了注解功能, 通过注解,代码编写简化了很多:但熟悉注解的使 ...

  8. 浅谈HTTP中GET、POST用法以及它们的区别

    浅谈HTTP中GET.POST用法以及它们的区别 HTTP定义了与服务器交互的不同方法,最基本的方法有4种,分别是GET,POST,PUT,DELETE.URL全称是资源描述符.我们可以这样认为: 一 ...

  9. 浅谈JS中的!=、== 、!==、===的用法和区别 JS中Null与Undefined的区别 读取XML文件 获取路径的方式 C#中Cookie,Session,Application的用法与区别? c#反射 抽象工厂

    浅谈JS中的!=.== .!==.===的用法和区别   var num = 1;     var str = '1';     var test = 1;     test == num  //tr ...

随机推荐

  1. python,读取txt的方法和应用

    1.读取txt内的百度盘地址,循环保存到百度云中(直接访问下方地址) https://www.cnblogs.com/becks/p/11409467.html 2.读取txt内参数,循环执行查询,读 ...

  2. TCP/IP、TCP、UDP、Socket知识汇总

    带你了解TCP/IP,UDP,Socket之间关系 https://blog.csdn.net/chaoshenzhaoxichao/article/details/79785318 主要知识点: T ...

  3. 小白学 Python 数据分析(1):数据分析基础

    各位同学好,小编接下来为大家分享一些有关 Python 数据分析方面的内容,希望大家能够喜欢. 人工植入广告: PS:小编最近两天偷了点懒,好久没有发原创了,最近是在 CSDN 开通了一个付费专栏,用 ...

  4. springboot-mybatis配置问题

    org.apache.ibatis.binding.BindingException: Invalid bound statement (not found)问题

  5. js 字符串方法 和 数组方法总览

    字符串方法        search()             方法搜索特定值的字符串,并返回匹配的位置.         相比于indexOf(),search()可以设置更强大的搜索值(正则表 ...

  6. Spring-cloud微服务实战【八】:API网关zuul

      在前面的文章中,我们先后使用了eureka/ribbon/feign/hystrix搭建了一个看似完美的微服务了,那是否还有值得继续优化的地方呢?答案肯定是有的,如果从整个微服务内部来看,基本已经 ...

  7. tmobst4an

    (单选题)HTML代码: <table> <tr><td>Value 1</td><td></td></tr> &l ...

  8. 使用纯C++迭代器编写归并排序

    第一次尝试用C++迭代器编写算法,使用的是纯迭代器 void mergeSort(vector<int>::iterator beg, vector<int>::iterato ...

  9. Codeforces_723_A

    http://codeforces.com/problemset/problem/723/A 取中间那个数就可以了,答案为最大值减最小值. #include<iostream> #incl ...

  10. [MP3]MP3固件持续分享(2019.1.25)

    转载自我的博客:https://blog.ljyngup.com/archives/179.html/ 所有的固件到我的博客就可以下载哦 最后更新于2019.2.1 前言 这篇文章会持续更新不同型号的 ...