html background属性
background属性
属性解释
background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图片和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项:
- background-color 设置背景颜色
- background-image 设置背景图片地址
- background-repeat 设置背景图片如何重复平铺
- background-position 设置背景图片的位置
- background-attachment 设置背景图片是固定还是随着页面滚动条滚动
实际应用中,我们可以用background属性将上面所有的设置项放在一起,而且也建议这么做,这样做性能更高,而且兼容性更好,比如:“background: #00FF00 url(bgimage.gif) no-repeat left center fixed”,这里面的“#00ff00”是设置background-color;“url(bgimage.gif)”是设置background-image;“no-repeat”是设置background-repeat;“left center”是设置background-position;“fixed”是设置background-attachment,各个设置项用空格隔开,有的设置项不写也是可以的,它会使用默认值。
举例:
下面这些例子使用下面这张图片做为背景图:
1、“background:url(bg.jpg)”,默认设置一个图片地址,图片会从盒子的左上角开始将盒子铺满。
2、“background:cyan url(bg.jpg) repeat-x”,横向平铺盒子,盒子其他部分显示背景颜色“cyan”。
3、“background:cyan url(bg.jpg) repeat-y”,纵向平铺盒子,盒子其他部分显示背景颜色“cyan”。
4、“background:cyan url(bg.jpg) no-repeat”,背景不重复,背景和盒子左上角对齐,盒子其他部分显示背景颜色“cyan”。
5、“background:cyan url(bg.jpg) no-repeat left center”,背景不重复,背景和盒子左中对齐,盒子其他部分显示背景颜色“cyan”。
6、“background:cyan url(bg.jpg) no-repeat right center”,背景不重复,背景和盒子右中对齐,也就是背景图片的右边对齐盒子的右边,盒子其他部分显示背景颜色“cyan”。
相关代码:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>test background</title><style type="text/css">.backshow{width:320px;height:160px;border:3px solid #333;float:left;margin:10px; }.bg1{background:cyan url(bg.jpg);}.bg2{background:cyan url(bg.jpg) repeat-x;}.bg3{background:cyan url(bg.jpg) repeat-y;}.bg4{background:cyan url(bg.jpg) no-repeat;}.bg5{background:cyan url(bg.jpg) no-repeat left center;}.bg6{background:cyan url(bg.jpg) no-repeat right center;}</style>
</head>
<body><div class="backshow bg1"></div><div class="backshow bg2"></div><div class="backshow bg3"></div><div class="backshow bg4"></div><div class="backshow bg5"></div><div class="backshow bg6"></div>
</body>
</html>
例子说明:
代码中使用到的背景图片,可以直接在页面上的背景图片上点右键另存下来,命名为:“bg.jpg”,并且和网页文件存在同一个目录下。
关于背景图片的background-position的设置,设置背景图片水平位置的有“left”、“center”、“right”,设置背景图片垂直位置的有“top”、“center”、“bottom”,水平和垂直的属性值两两组合,就可以把背景图设置到对齐盒子的四个角或者四个边的中心或者盒子的正中心位置。还可以设置具体的像素值来把背景图片精确地定位到盒子的某个位置,特别是对于背景图片尺寸大于盒子尺寸的这种情况,我们可以用数值定位,截取大图片的某一块做为盒子的背景。
比如说,我们想把下边的盒子用右边的图片作为背景,并且让背景显示图片中靠近底部的那朵花:
用上面中间那张图片作为左边那个比它尺寸小的盒子的背景,如果不设置background-position,默认背景图的左上角会和盒子的左上角对齐,如果设置,可以用两个数值定位背景图,上面右边的实现效果设置为:“background:url(location_bg.jpg) -110px -150px”,第一个数值表示背景图相对于自己的左上角向左偏移110px,负值向左,正值向右,第二个数值表示背景图相对于自己的左上角向上偏移150px,负值向上,正值向下。
实现原理示意图:
对应代码:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>test background</title><style type="text/css">.backshow{width:320px;height:160px;border:3px solid #333;float:left;margin:10px; } .bg{width:94px;height:94px;border:3px solid #666;background:url(location_bg.jpg) -110px -150px;}</style>
</head>
<body><div class="bg"></div>
</body>
</html>
html background属性相关推荐
- css的background属性
背景background属性如下: background:设置或检索对象的背景特性 background-color:设置或检索对象的背景颜色 background-image:设置或检索对象的背景图 ...
- CSS background属性
我们在研究其他的网站的样式的时候经常会发现一种情况,就是在很多background属性里都调用同一张图片,来满足网页各个部分的使用.打开这种图片看一下,会发现这张图片上包含了很多小图片; 这些小图片就 ...
- .net的label的背景如何设置成为透明_css如何设置背景图片?background属性添加背景图片...
在前端开发过程中,为了页面的美观,往往都会给html页面添加背景图片.那么如何利用css设置html中用图片做背景?本章就给大家介绍css怎样设置背景图片.有一定的参考价值,有需要的朋友可以参考一下, ...
- CSS 背景 background属性
背景是创建更有趣味的网页的常用一种手法,无论是直接使用背景颜色,还是使用背景图像,都能给网页带来丰富的视觉效果. 在CSS1中,就提供了对背景的控制,并提供了 5 个background相关的属性,用 ...
- background复合属性顺序_CSS的background属性的缩写顺序介绍
CSS的background属性的缩写顺序介绍 发布时间:2014-03-28 14:55:25 作者:佚名 我要评论 CSS的background属性的缩写,优点是比单个属性书写要简单,要少 ...
- CSS background 属性
一.background属性可以设置一个元素的背景样式,当然前提是这个元素有具体的宽高值. 先来一个简单的背景设置: 1 #show-box { 2 width: 800px; 3 height: 5 ...
- 学习CSS的background属性及其取值(实践)
CSS的背景属性 属性 描述 可用值 background 设置背景的所有控制选项 其他背景属性可用值的集合 background-color 设置背景颜色 命名颜色.十六进制颜色等 backgrou ...
- html图片背景属性,css 背景(background)属性、背景图定位
background属性: Background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图上和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项: ...
- 淘宝宝贝描述模板DIV无法使用BACKGROUND属性的终极解决方案
淘宝宝贝描述模板DIV无法使用BACKGROUND属性的终极解决方案 (2011-05-10 07:47:34) 转载▼ 标签: 淘宝模板 div 背景属性 background 过滤 无法使用 打听 ...
- html怎么帮图片占位,css 技巧:利用 after 伪对象和 background 属性实现 img 图片标签占位图...
如图: 图片加载失败了,在浏览器会默认显示一张破图.受各种网速.浏览器等因素影响,我们无法保证图片能够完全加载成功.加载失败时如何更友好的显示是前端要考虑的主要因素. 常见做法都是使用一张默认图代替加 ...
最新文章
- 任正非迷茫的背后是华为在“治未病”
- 升级失败?用TFTP修复Linksys无线路由器固件
- 内核电源管理器已启动关机转换_Linux系统启动流程
- ASP.NET前台JS与后台CS函数如何互相调用
- dev c++ 代码补全_zsh配置与代码自动补全+tmux配置
- 多媒体计算机接口卡,多媒体技术基础 2.2多媒体接口卡 多媒体接口卡.docx
- 【java】Java 中的 Exchanger 线程同步使用方法 线程之间交换数据
- python实用库_python常用库
- 2x麦克劳林公式_极限求解-泰勒公式理解
- 【元胞自动机】基于matlab元胞自动机交通流仿真【含Matlab源码 827期】
- 软件构造笔记——Java基本数据类型和对象数据类型
- 潜意识幻想-思维幻觉-昏迷中的加速思考
- 什么是全文搜索引擎?
- Navicat批量修改数据库某一属性初始值
- exposure x5胶片滤镜插件如何安装及使用下载技巧
- 校验和(Checksum)算法-概述
- Crossplane - 比 Terraform 更先进的云基础架构管理平台?
- 利用FastReport传递图片参数,在报表上展示签名信息
- 宝宝与父母间的纽带——毛绒玩具
- 百亿积木市场,能跑出一个“中国乐高”?