CSS背景图片常见属性设置
在CSS中,图片属性的设置是必不可少的,下面介绍一下常见的图片属性:
1)背景图片插入:background-image:url(位置及名称); //默认在父级元素内的左上角
2)背景平铺方式:background-repeat:no-repeat; //不平铺
3)背景位置:background-position:right bottom; //横向在右边,纵向在下边,即右下角
center center; //位于中心
center right; //中间靠右
100px 200px; //靠左100 靠上200
4)背景显示方式:background-attachment:scroll//随屏幕滚动 fixed//固定在可视区域,注意:此时的位置是相对于可视区域的
(fixed:这里有一个兼容性性的问题,在IE6中,只有html和body支持这个属性)
5)在图片设置边距时注意IE6的双倍间距问题:同时有浮动和边距时产生双倍间距!
解决方法: display:inline;//变为行内元素即可
注意:网页中能够选中的图片就是插入的图片,否则就是背景图片!
这里提一下css精灵技术:
目的:主要是为了减少http请求次数
核心思想:将多张图片合成为一张图片,然后通过背景属性中的定位来控制显示部分
当然,这里只是css背景中常见的属性设置,还有一些没有涉及,就像一些默认值没有提到,
另外如果还有一些重要但我没有提到的请大家回复一下,我会及时补充,谢谢!
CSS背景图片常见属性设置的更多相关文章
- Bootstrap css背景图片的设置
一. 网页中添加图片的方式有两种 一种是:通过<img>标签直接插入到html中 另一种是:通过css背景属性添加 居中方法:水平居中的text-align:center 和 margin ...
- CSS背景图片定位
原文:CSS背景图片定位 在网页开发中我们经常需要对图片进行分割(如下图)来使用,而不是分别提供单独的图片来调用,常见的如页面背景,按钮图标等,这样做的好处就是减少请求次数,节省时间和带宽. 对背景图 ...
- 利用wget 抓取 网站网页 包括css背景图片
利用wget 抓取 网站网页 包括css背景图片 wget是一款非常优秀的http/ftp下载工具,它功能强大,而且几乎所有的unix系统上都有.不过用它来dump比较现代的网站会有一个问题:不支持c ...
- css背景图片拉伸 以及100% 满屏显示
如何用css背景图片拉伸 以及100% 满屏显示呢?这个问题听起来似乎很简单.但是很遗憾的告诉大家.不是我们想的那么简单. 比如一个容器(body,div,span)中设定一个背景.这个背景的长宽值在 ...
- div css背景图片不显示
我们在写页面时,为了便于维护,css样式通常都是通过link外部导入html的,有时在css中写入背景图片时,此时背景图片的路径应该是相对css文件的.比如,此时的文件有index.html,css. ...
- 【IE6的疯狂之八】链接伪类(:hover)CSS背景图片有闪动BUG
IE6下链接伪类(:hover)CSS背景图片有闪动BUG,主要原因ie会再一次请求这张图片,或者说图片没被缓存. 例如: CSS代码 a:hover{background:url(imagepath ...
- 【转】链接伪类(:hover)CSS背景图片有闪动BUG
来源:http://www.css88.com/archives/744 --------------------------------------------------------------- ...
- 兼容各浏览器的css背景图片拉伸代码
需要用到背景图拉伸,找到了下面这段css代码: filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='***.jpg' , s ...
- css背景图片拉伸
css背景图片拉伸 background-image:url(bg.png); -moz-background-size: 100% 100%; -o-background-size: 100% 10 ...
随机推荐
- java入门知识
Java特性 简单.面向对象.支持网络.解释性.健壮性.安全性.高性能.可移植(跨平台) Java特点 开源.免费.跨平台.面向对象 应用平台 JavaSE(standard edition)(c/s ...
- ST Lab1 junit test
代码地址: https://github.com/newff/st-lab1 Tasks: Install Junit(4.12), Hamcrest(1.3) with Eclipse Insta ...
- Ubuntu 不支持 rpm
不是第一次犯这个错误了. 记一下. 每次安装jdk 的时候,习惯性下载rpm包. 然后的,然后在 ubuntu上rpm 安装的时候就跪了.. ubuntu需要使用Alien 把rpm 转成 deb再安 ...
- webStorm Linux Ubuntu 中文搜狗输入问题
1 打开安装路径下bin/webstorm.sh vim ~/WebStorm-145.597.6/bin/webstorm.sh 2.在打开文件的最前面加入如下代码: export XMODIFIE ...
- 2017 Android 面试题 [ 基础与细节 ]
2017 Android 面试题 [ 基础与细节 ] 感谢@chuyao抛出的这些问题,平时业务代码写多了,很多基础的东西变得含糊不清了,这次裸辞出来找工作确实没有之前顺利,顺便求上海Android开 ...
- 【js数据结构】栈解决括号不匹配问题
栈可以用来判断一个算术表达式中的括号是否匹配. 思路:读取算术表达式,遇到左括号'{'.'['.'('压入栈,栈的特点是后入先出,所以当遇到右括号'}'.']'.')'的时候,取出栈顶元素,是否满足读 ...
- Leetcode_001_TwoSum_求和为固定数的两个数的索引
题目描述 给定一个整型数组,在数组中找出两个数使这两个数的和为给定数,从小到大输出这两个数在数组中的位置(我们可以假定输出结果只有一个).例如,输入:N={1,4,8,20}, target=1 ...
- 初用Linux, 安装Ubuntu16.04+NVIDIA387+CUDA8.0+cudnn5.1+TensorFlow1.0.1
因为最近Deep Learning十分热门, 装一下TensorFlow学习一下. 本文主要介绍安装流程, 将自己遇到的问题说明出来, 并记录自己如何处理, 原理方面并没有能力解释. 由于本人之前从来 ...
- 一切app源于生活 用于生活 一个利于生活的app——利生活
现在的app软件可以说 各行各业都基本达到饱和阶段 因为智能手机时代让我们的世界缩小了十倍百倍甚至千倍,我们可以足不出户知天下可以足不出户的去购物. 既然app利于生活 那么今天我所要开发的一个app ...
- String及其常用API
String 类代表字符串.Java 程序中的所有字符串字面值(如 "abc" )都作为此类的实例实现. 字符串是常量:它们的值在创建之后不能更改.字符串缓冲区支持可变的字符串.因 ...