css网页中设置背景图片的方法详解
用css设置网页中的背景图片,主要有如下几个属性:
注意:在HTML当中,要为某个对象加上背景色只有一种办法,那就是先做一个表格,在表格中设置完背景色,再把对象放进单元格。
这样做比较麻烦,不但代码较多,还要为表格的大小和定位伤些脑筋。现在用CSS就可以轻松地直接搞定了,而且对象的范围很广,可以是一段文字,也可以只是一个单词或一个字母。
例子:给部分文字加背景颜色给部分文字加背景颜色
表格背影颜色:
语法:{background-image: url(URL)|none}
说明: URL就是背景图片的存放路径。如果用“none”来代替背景图片的存放路径,将什么也不显示。
例子:给部分文字加背景图片
3.背景重复:background-repeat
语法:{background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}
作用:背景图片重复控制的是背景图片平铺与否,也就是说,结合背景定位的控制可以在网页上的某处单独显示一幅背景图片
说明:参数取值范围:
·no-repeat 不重复平铺背景图片
·repeat
·repeat-x 使图片只在水平方向上平铺
·repeat-y 使图片只在垂直方向上平铺
注意:如果不指定背景图片重复属性,浏览器默认的是背景图片向水平、垂直两个方向上平铺。
4.背景固定:background-attachment
语法:{background-attachment:fixed|scroll}
说明:参数取值范围
·scroll:网页滚动时,背景图片相对于浏览器的窗口而言,一起滚动
注意:背景图片固定控制背景图片是否随网页的滚动而滚动。如果不设置背景图片固定属性,浏览器默认背景图片随网页的滚动而滚动。为了避免过于花哨的背景图片在滚动时伤害浏览者的视力,所以可以解除背景图片和文字内容的捆绑,该为和浏览器窗口捆绑。
例子:使背景图案不随文字“滚动”的CSS
5.背景定位:background-position
语法:{background-position:数值|top|bottom|left|right|center}
作用:背景定位用于控制背景图片在网页中显示的位置。
说明:参数取值范围
·top:相对前景对象顶对齐
·bottom:相对前景对象底对齐
·left:相对前景对象左对齐
·right:相对前景对象右对齐
·center:相对前景对象中心对齐
·比例关系
关键字解释:
top left = left top = 0% 0%
css网页中设置背景图片的方法详解的更多相关文章
- CSS网页中导入特殊字体@font-face属性详解
@font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中. 语法规则 首先我们一起来看看@font-face的语法规则: @font-face { font-fami ...
- Qt中添加背景图片的方法
工作似乎走上正轨了,上周五的工作是做一个界面,用到QFrame和QPushButton,QFrame做主面板,QPushButton为其子控件,需要在主面板上贴背景图片,还需要在QPushButton ...
- Linux中让alias设置永久生效的方法详解
Linux中让alias设置永久生效的方法详解 一.问题描述 1.有很多时候我们想要将很多操作作为一个步骤,那么在不作为系统的服务的情况下,别名是我们最好的选择,但是发现别名只能在一次会话中生效,重启 ...
- Java中的equals和hashCode方法详解
Java中的equals和hashCode方法详解 转自 https://www.cnblogs.com/crazylqy/category/655181.html 参考:http://blog.c ...
- 转:Java中的equals和hashCode方法详解
转自:Java中的equals和hashCode方法详解 Java中的equals方法和hashCode方法是Object中的,所以每个对象都是有这两个方法的,有时候我们需要实现特定需求,可能要重写这 ...
- python中验证码连通域分割的方法详解
python中验证码连通域分割的方法详解 这篇文章主要给大家介绍了关于python中验证码连通域分割的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用python具有一定的参考学习价值,需 ...
- php中读取大文件实现方法详解
php中读取大文件实现方法详解 来源: 时间:2013-09-05 19:27:01 阅读数:6186 分享到:0 [导读] 本文章来给各位同学介绍php中读取大文件实现方法详解吧,有需要了解 ...
- ecshop后台增加|添加商店设置选项和使用方法详解
有时候我们想在Ecshop后台做个设置.radio.checkbox 等等来控制页面的显示,看看Ecshop的设计,用到了shop_config这个商店设置功能 Ecshop后台增加|添加商店设置选项 ...
- Delphi中TStringList类常用属性方法详解
TStrings是一个抽象类,在实际开发中,是除了基本类型外,应用得最多的. 常规的用法大家都知道,现在来讨论它的一些高级的用法. 先把要讨论的几个属性列出来: 1.CommaText 2.Delim ...
随机推荐
- Microsoft Power BI Desktop概念学习系列之Microsoft Power BI Desktop的下载和安装(图文详解)
不多说,直接上干货! 官网 https://powerbi.microsoft.com/zh-cn/downloads/ 这里,一般用126邮箱. 因为对于163这样的邮箱是不行. 欢迎大家,加入我的 ...
- JavaScript数据结构-9.循环链表
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- ubuntu工具安装
smplayer sudo add-apt-repository ppa:rvm/smplayer sudo apt-get update sudo apt-get install smplayer ...
- Linux下SSH工具 PAC Manager的安装
PAC Manager, Linux下类似SecureCRT Xshell的SSH工具,该工具功能上相当的不错,完全可以代替SecureCRT Xshell的功能. PAC (Perl Auto Co ...
- 设计模式应用场景之Model设计中可以用到的设计模式
在开发中,不同的场景适用不同的设计模式.对于开发建模方面,可以根据模型的抽象类型设计成简单属性模式和复杂组合模式. 因为组合模式中的属性为多种类型对象,可操作性也比较灵活. 而针对这种复杂数据结构,有 ...
- jQuery适用技巧笔记整合
1.关于页面元素的引用 通过jquery的$()引用元素包括通过id.class.元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用do ...
- JavaScript函数——闭包
闭包 概念 只有函数内部的子函数才能读取局部变量,所以闭包可以理解成"定义在一个函数内部的函数".在本质上,闭包是将函数内部和函数外部连接起来的桥梁 例子 function out ...
- 非科班双非本科投的337家Java后台(励志)
考试结束,班级平均分只拿到了年级第二,班主任于是问道:大家都知道世界第一高峰珠穆朗玛峰,有人知道世界第二高峰是什么吗?正当班主任要继续发话,只听到角落默默想起来一个声音:”乔戈里峰” 前言 文章出自h ...
- C语言20150620
1-->printf()输出的时候前面没有0 是十进制,前面带0是八进制,前面有0x是十六进制 printf("%d",100):十进制解析 printf("%d& ...
- java map常用的4种遍历方法
public static void main(String[] args) { Map<String, String> map = new HashMap<String, Stri ...