CSS背景属性彻底研究
☆ 背景颜色属性(background-color)
这个属性为HTML元素设定背景颜色,相当于HTML中bgcolor属性。
body {background-color:#99FF00;}
上面的代码表示Body这个HTML元素的背景颜色是翠绿色的。
☆ 背景图片属性(background-image)
这个属性为HTML元素设定背景图片,相当于HTML中background属性。
<body style="background-image:url(../images/css_tutorials/background.jpg)">
上面的代码为Body这个HTML元素设定了一个背景图片。
☆ 背景重复属性(background-repeat)
这个属性和background-image属性连在一起使用,决定背景图片是否重复。如果只设置background-image属性,没设置background-repeat属性,在缺省状态下,图片既横向重复,又竖向重复。
· repeat-x 背景图片横向重复
· repeat-y 背景图片竖向重复
· no-repeat 背景图片不重复
body {background-image:url(../images/css_tutorials/background.jpg); background-repeat:repeat-y}
上面的代码表示图片竖向重复。
☆ 背景附着属性(background-attachment)
这个属性和background-image属性连在一起使用,决定图片是跟随内容滚动,还是固定不动。这个属性有两个值,一个是scroll,一个是fixed。缺省值是scroll。
body {background-image:url(../images/css_tutorials/background.jpg); background-repeat:no-repeat; background-attachment:fixed}
上面的代码表示图片固定不动,不随内容滚动而动。
☆ 背景位置属性(background-position)
这个属性和background-image属性连在一起使用,决定了背景图片的最初位置。
body {background-image:url(../images/css_tutorials/background.jpg);background-repeat:no-repeat; background-position:20px 60px}
上面的代码表示背景图片的初始位置距离网页最左面20px,距离网页最上面60px。
代码最后background-position还有两个选项:top和left。可以单独使用,也可以象本例一样组合使用。
top:顶部
bottom:底部
left:左边
right:右边
top left:左上角
top right:右上角
right bottom:右下角
left bottom:左下角
☆ 背景属性(background)
这个属性是设置背景相关属性的一种快捷的综合写法,包括background-color, background-image, background-repeat, backgroundattachment, background-position。
body {background:#99FF00 url(../images/css_tutorials/background.jpg) no-repeat fixed 40px 100px}
上面的代码表示,网页的背景颜色是翠绿色,背景图片是background.jpg图片,背景图片不重复显示,背景图片不随内容滚动而动,背景图片距离网页最左面40px,距离网页最上面100px。
转载于:https://www.cnblogs.com/coolar/archive/2006/08/16/478879.html
CSS背景属性彻底研究相关推荐
- 用dw中html设置背景,Dreamweaver 教程-CSS背景属性(background)
但凡正规的网站在设计时都会注重网页背景的使用,一个好的网页背景与整体设计是息息相关的.下面我们就来讲讲一些常用的CSS背景属性. 1.背景颜色属性(background-color)body { ba ...
- 前端:CSS/10/伪类选择器,CSS列表属性,CSS边框属性,CSS内边距属性,CSS背景属性
CSS伪类选择器:给超链接加的样式(链接的不同状态加样式) 一个超链接,有四个状态: 正常状态(:link):鼠标没放上去之前的样式: 放上状态(:hover):鼠标放到链接上时的样式: 激活状态(: ...
- HTML5 - CSS背景属性、与CSS三大特性描述
文章目录 CSS的背景 背景颜色 背景图片 背景平铺 背景图片位置 设置超大图片为背景小案例 获取网页图片中小技巧 背景图像固定(背景附着) 复合属性 背景色半透明 注意 CSS背景总结(表格) CS ...
- html中页面背景属性,css背景属性有哪些?
css背景属性有哪些?下面本篇文章给大家带来关于css背景属性的介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. css背景属性有哪些?background简写属性,作用是将背景 ...
- 零基础学习CSS---05.CSS背景属性详解
CSS属性 一.背景属性 1.background-color(背景颜色):red: 2.background-image(背景图片):background-image:url(图片地址); 3.ba ...
- 【CSS 背景属性 background】
CSS 背景属性 background CSS 背景属性 1. background 属性: 一次性 集中定义 8个 背景相关属性 2. background-color 属性: 元素的 背景颜色 ( ...
- CSS背景属性、定位
文章目录 前言 一.css的常用样式-背景属性 1.背景颜色 background-color 2.背景图片 background-image 3.背景重复 background-repeat 4.背 ...
- 4.CSS 背景属性
文章目录 1.背景颜色 2.背景图片 3.背景平铺属性 3.1应用场景 4.背景定位属性 4.1背景定位属性(值:单词) 4.2背景定位属性(值:数值) 4.3应用场景 5.背景图片关联方式 6.背景 ...
- css 背景属性 0302
背景颜色 background-color 背景图片 平铺属性 background-repeat 背景图位置 background-position 背景属性的连写
最新文章
- Android fill_parent、wrap_content和match_parent的区别
- ArrayList之坑点
- php 协程怎么用,PHP yield 协程 生成器用法的了解
- 微信小程序中用setData修改一个对象的属性值
- 如何用Unity和Cardboard做一款VR游戏
- spring-boot-admin 2.0小试牛刀
- postman delete 请求传递数组_Postman请求方法
- 小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_2-5.开源工具的优缺点选择和抽象方法的建议...
- PM3嗅探数据采集密码自动提取密码工具
- 苹果官网首页页面设计
- 01炼数成金TensorFlow基本概念
- 胡适致迷茫大学生:成不在一时,功必不唐捐
- autojs pro逍遥游模拟器vscode调试
- 成绩不好的穷孩子,该做出选择了
- 淘宝/天猫API接口,获得淘宝商品详情高级版
- 单片机/树莓派扩展双串口(TTL和RS485)
- Js模拟重力场【Js动效】
- Java生鲜电商平台-技术方案与文档下载
- 图片太大了怎么改小KB?教你2招无损图片压缩
- Javascript的图片滚动浏览效果代码