浅谈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教程总结
这个背景看起来还是有那么一点点的复杂,但是只要沉下心来慢慢去学习就会觉得这个就那样,因此好好去学习下,载我们以后遇见复杂的网页时,运用这些知识就会是得心应手了。
浅谈background的用法的更多相关文章
- 浅谈localStorage的用法
今天接到一个任务,说是让自动调节textarea标记的输入高度,而且还要记录下来,下次登录的时候还是调节后的高度,我第一时间就想到了localStorage的用法,直接代码献上: <html l ...
- Linux之浅谈VIM常见用法及原理图
本次归纳以强大的VIM文本处理工具常见用法去展开论述. 文本编辑种类: 行编辑器:sed 全屏编辑器:nano,vi vim - Vi改进 其他编辑器: ...
- 浅谈intval()函数用法
<? } } 总结:intval()函数功能1.参数一定是数字否则会报错,2.如果是数字那一定是整数,如果有小点,那会省略掉,3,强调参数可以有“-”值.4.参数第一位不应为0开头,不然会自动转 ...
- 浅谈AutoResetEvent的用法
using System;using System.Threading; namespace AutoResetEvent_Examples{ class MyMainClass { ...
- 浅谈Task的用法
Task是用来实现多线程的类,在以前当版本中已经有了Thread及ThreadPool,为什么还要提出Task类呢,这是因为直接操作Thread及ThreadPool,向线程中传递参数,获取线程的返回 ...
- 浅谈Python在信息学竞赛中的运用及Python的基本用法
浅谈Python在信息学竞赛中的运用及Python的基本用法 前言 众所周知,Python是一种非常实用的语言.但是由于其运算时的低效和解释型编译,在信息学竞赛中并不用于完成算法程序.但正如LRJ在& ...
- 浅谈@RequestMapping @ResponseBody 和 @RequestBody 注解的用法与区别
浅谈@RequestMapping @ResponseBody 和 @RequestBody 注解的用法与区别 Spring 2.5 版本新增了注解功能, 通过注解,代码编写简化了很多:但熟悉注解的使 ...
- 浅谈HTTP中GET、POST用法以及它们的区别
浅谈HTTP中GET.POST用法以及它们的区别 HTTP定义了与服务器交互的不同方法,最基本的方法有4种,分别是GET,POST,PUT,DELETE.URL全称是资源描述符.我们可以这样认为: 一 ...
- 浅谈JS中的!=、== 、!==、===的用法和区别 JS中Null与Undefined的区别 读取XML文件 获取路径的方式 C#中Cookie,Session,Application的用法与区别? c#反射 抽象工厂
浅谈JS中的!=.== .!==.===的用法和区别 var num = 1; var str = '1'; var test = 1; test == num //tr ...
随机推荐
- python,读取txt的方法和应用
1.读取txt内的百度盘地址,循环保存到百度云中(直接访问下方地址) https://www.cnblogs.com/becks/p/11409467.html 2.读取txt内参数,循环执行查询,读 ...
- TCP/IP、TCP、UDP、Socket知识汇总
带你了解TCP/IP,UDP,Socket之间关系 https://blog.csdn.net/chaoshenzhaoxichao/article/details/79785318 主要知识点: T ...
- 小白学 Python 数据分析(1):数据分析基础
各位同学好,小编接下来为大家分享一些有关 Python 数据分析方面的内容,希望大家能够喜欢. 人工植入广告: PS:小编最近两天偷了点懒,好久没有发原创了,最近是在 CSDN 开通了一个付费专栏,用 ...
- springboot-mybatis配置问题
org.apache.ibatis.binding.BindingException: Invalid bound statement (not found)问题
- js 字符串方法 和 数组方法总览
字符串方法 search() 方法搜索特定值的字符串,并返回匹配的位置. 相比于indexOf(),search()可以设置更强大的搜索值(正则表 ...
- Spring-cloud微服务实战【八】:API网关zuul
在前面的文章中,我们先后使用了eureka/ribbon/feign/hystrix搭建了一个看似完美的微服务了,那是否还有值得继续优化的地方呢?答案肯定是有的,如果从整个微服务内部来看,基本已经 ...
- tmobst4an
(单选题)HTML代码: <table> <tr><td>Value 1</td><td></td></tr> &l ...
- 使用纯C++迭代器编写归并排序
第一次尝试用C++迭代器编写算法,使用的是纯迭代器 void mergeSort(vector<int>::iterator beg, vector<int>::iterato ...
- Codeforces_723_A
http://codeforces.com/problemset/problem/723/A 取中间那个数就可以了,答案为最大值减最小值. #include<iostream> #incl ...
- [MP3]MP3固件持续分享(2019.1.25)
转载自我的博客:https://blog.ljyngup.com/archives/179.html/ 所有的固件到我的博客就可以下载哦 最后更新于2019.2.1 前言 这篇文章会持续更新不同型号的 ...