在设置background-image属性时,有很多属性

1、background:url("图片路径") [no-repeat];

background:url("../images/images/up.jpg") no-repeat; 表示不重复显示图片

2、background-position

版本:CSS1 兼容性:IE6 7+ FF+ 继承性:无
语法
background-position :length || length
background-position :position || position
取值: position : top | center | bottom | left | center | right

说明
设置或检索对象的背景图像位置。必须先指定 background-image 属性。
该属性定位不受对象的补丁属性( padding )设置影响。
默认值为: 0% 0% 。此时背景图片将被定位于对象不包括补丁( padding )的内容区域的左上角。
如果只指定了一个值,该值将用于横坐标。纵坐标将默认为 50% 。如果指定了两个值,第二个值将用于纵坐标。
如果设置值为 right center ,因为 right 作为横坐标值将会覆盖 center 值,所以背景图片将被居右定位。
对应的脚本特性为 backgroundPosition 。

示例
div { background: url(\"images/aardvark.gif\"); background-position: 35% 80%; }
menu { background: url(\"images/aardvark.gif\"); background-position: 35% 2.5cm; }
a { background: url(\"images/aardvark.gif\"); background-position: 3.25in; }
body { background: url(\"images/aardvark.gif\"); background-position: top 0px right 0px; }
其实background-position就是用来控制background-image的position
如果指定一个值,该值用于横坐标,纵坐标采用默认,即50%(center)
如果指定两个值,第二个值用于纵坐标,
例如你写定:background-position: left center;其实和background-position: left;是一样的都是左对齐,垂直居中对齐
如果指定:background-position: left left;就是左对齐,垂直居中对齐
如果指定:background-position: right right;就是右对齐,垂直居中对齐
如果指定:background-position: left right;其实这两个值都是在横坐标上的作用,right会覆盖left属性,所以最后显示的还是就是右对齐,垂直居中对齐。
除了left center right 还有TOP bottom,这两个分别是顶部对齐,底部对齐.
例如指定:background-position: left top;那么图片将位于左上角。
利用这个特性可以实现一个非常酷的效果
根据以上实例还可以如下写法,兼容性也比较好
.test {background: url(title_bg2.jpg) no-repeat -203px 0px; width:200px; height:36px;}
.title {background: url(title_bg.jpg) no-repeat left 0px; width:83px; height:36px;}

3、background-attachment

取值: fixed | scroll | inherit

fixed  就是背景图片固定  不会随着页面滚动而变化,IE、Firefox 效果不同 Firefox有效果,IE6不起效果*/

4、background-repeat

版本:CSS1  兼容性:IE4+ NS4+ 继承性:无

语法:
background-repeat : repeat | no-repeat | repeat-x | repeat-y
参数:
repeat :  背景图像在纵向和横向上平铺
no-repeat :  背景图像不平铺
repeat-x :  背景图像在横向上平铺
repeat-y :  背景图像在纵向平铺
说明:
设置或检索对象的背景图像是否及如何铺排。必须先指定对象的背景图像。
对应的脚本特性为backgroundRepeat。请参阅我编写的其他书目。
示例:
menu { background: url("images/aardvark.gif"); background-repeat: repeat-y; }
p { background: url("images/aardvark.gif"); background-repeat: no-repeat; }

DIV CSS BackGround属性研究相关推荐

  1. DIV+CSS技术的研究

    第一章 DIV+CSS技术的基础知识 第一节DIV+CSS的基本概念 DIV+CSS是网站标准(或称"WEB标准")中常用术语之一,通常为了说明与HTML网页设计语言中的表格(ta ...

  2. 淘宝宝贝描述模板DIV无法使用BACKGROUND属性的终极解决方案

    淘宝宝贝描述模板DIV无法使用BACKGROUND属性的终极解决方案 (2011-05-10 07:47:34) 转载▼ 标签: 淘宝模板 div 背景属性 background 过滤 无法使用 打听 ...

  3. CSS background属性

    我们在研究其他的网站的样式的时候经常会发现一种情况,就是在很多background属性里都调用同一张图片,来满足网页各个部分的使用.打开这种图片看一下,会发现这张图片上包含了很多小图片; 这些小图片就 ...

  4. div css教程 属性,Div+CSS布局入门教程

    在网页制作中,有许多的术语,例如:CSS.HTML.DHTML.XHTML等等.在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础 ...

  5. CSS background 属性

    一.background属性可以设置一个元素的背景样式,当然前提是这个元素有具体的宽高值. 先来一个简单的背景设置: 1 #show-box { 2 width: 800px; 3 height: 5 ...

  6. CSS background 属性全家桶

    Write By Monkeyfly 以下内容均为原创,如需转载请注明出处. 前提 今天在审查元素时,发现这样一串代码: input.btn-upload {top: 0;right: 0;width ...

  7. CSS background属性详解

    background是一种 CSS 简写属性,用于一次性集中定义各种背景属性,包括 color, image, origin 与 size, repeat 方式等等. 此属性是一个 简写属性,可以在一 ...

  8. css如何设置背景图片?background属性添加背景图片

    在前端开发过程中,为了页面的美观,往往都会给html页面添加背景图片.那么如何利用css设置html中用图片做背景?本章就给大家介绍css怎样设置背景图片.有一定的参考价值,有需要的朋友可以参考一下, ...

  9. .net的label的背景如何设置成为透明_css如何设置背景图片?background属性添加背景图片...

    在前端开发过程中,为了页面的美观,往往都会给html页面添加背景图片.那么如何利用css设置html中用图片做背景?本章就给大家介绍css怎样设置背景图片.有一定的参考价值,有需要的朋友可以参考一下, ...

最新文章

  1. Failure Groups in ASM
  2. 夯实“茄克”核心竞争力,高端新国货谋图百年基业
  3. 找回消失的ubuntu启动选项
  4. 实战使用Axure设计App,使用WebStorm开发(4) – 实现页面UI
  5. win10 解决升级 WordPress 时提示”另一更新正在进行”
  6. 修复版超强大微信小程序源码-内含几十款功能王者战力查询
  7. android 性能优化---(2) MTK 平台开机时间优化
  8. 使用手册 煤矿风险管控系统_煤矿风险分级管控手册.doc
  9. webpack2系列step1--HTML
  10. 计算机基础知识统考考ppt么,(计算机应用基础统考)第一章计算机基础知识.ppt
  11. anbox 使用情况_Anbox 实现分析 2:I/O 模型
  12. 微信小程序学习(五)
  13. 腾讯云服务器80等端口无法访问
  14. Js验证身份证是否正确
  15. ua识别(浏览器标识识别)
  16. 华栖云与阿里云首推“云上电视台”,可实现内容云端一站式制作
  17. 在Linux平台上搭建EasyDarwin,编译代码并简单部署
  18. C语言-假设有一对兔子,出生第二个月变成了一对大兔子,第三个月后变成一对老兔子, 并开始每月出生一对小兔子,依次类推。求15个月内共有多少对兔子?
  19. NYOJ-最大值和最小值
  20. Linux简介-远程操作-文本编辑器-1

热门文章

  1. 架构师学习笔记(持续更新)
  2. 蓝桥杯 ADV-109 算法提高 征税程序
  3. java 串口 rxtx_【Java】基于RXTX的Java串口通信
  4. ios底部栏设计规范_2016年全新Apple iOS设计规范指南!
  5. Java 用HTTP的方式发送JSON报文请求
  6. MongoDB,分组,聚合
  7. Perl 模块 Getopt::Std 和 Getopt::Long
  8. angular2之pdf文件操作大全
  9. 云服务器 ECS 搭建WordPress网站:购买 Linux 实例
  10. 快速搭建Web环境 Angularjs + Express3 + Bootstrap3