在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背景图片常见属性设置的更多相关文章

  1. Bootstrap css背景图片的设置

    一. 网页中添加图片的方式有两种 一种是:通过<img>标签直接插入到html中 另一种是:通过css背景属性添加 居中方法:水平居中的text-align:center 和 margin ...

  2. CSS背景图片定位

    原文:CSS背景图片定位 在网页开发中我们经常需要对图片进行分割(如下图)来使用,而不是分别提供单独的图片来调用,常见的如页面背景,按钮图标等,这样做的好处就是减少请求次数,节省时间和带宽. 对背景图 ...

  3. 利用wget 抓取 网站网页 包括css背景图片

    利用wget 抓取 网站网页 包括css背景图片 wget是一款非常优秀的http/ftp下载工具,它功能强大,而且几乎所有的unix系统上都有.不过用它来dump比较现代的网站会有一个问题:不支持c ...

  4. css背景图片拉伸 以及100% 满屏显示

    如何用css背景图片拉伸 以及100% 满屏显示呢?这个问题听起来似乎很简单.但是很遗憾的告诉大家.不是我们想的那么简单. 比如一个容器(body,div,span)中设定一个背景.这个背景的长宽值在 ...

  5. div css背景图片不显示

    我们在写页面时,为了便于维护,css样式通常都是通过link外部导入html的,有时在css中写入背景图片时,此时背景图片的路径应该是相对css文件的.比如,此时的文件有index.html,css. ...

  6. 【IE6的疯狂之八】链接伪类(:hover)CSS背景图片有闪动BUG

    IE6下链接伪类(:hover)CSS背景图片有闪动BUG,主要原因ie会再一次请求这张图片,或者说图片没被缓存. 例如: CSS代码 a:hover{background:url(imagepath ...

  7. 【转】链接伪类(:hover)CSS背景图片有闪动BUG

    来源:http://www.css88.com/archives/744 --------------------------------------------------------------- ...

  8. 兼容各浏览器的css背景图片拉伸代码

    需要用到背景图拉伸,找到了下面这段css代码: filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='***.jpg' , s ...

  9. css背景图片拉伸

    css背景图片拉伸 background-image:url(bg.png); -moz-background-size: 100% 100%; -o-background-size: 100% 10 ...

随机推荐

  1. 1640: [Usaco2007 Nov]Best Cow Line 队列变换

    1640: [Usaco2007 Nov]Best Cow Line 队列变换 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 543  Solved: 2 ...

  2. RxJava Map操作详解

    2016-06-06 RxJava是最近两年火起来的一个框架,核心是异步,但是对于我来说印象最深的是响应式编程的思想.最近刚好想把自己的项目改成用RxJava实现,所以就研究了下.抛物线和大头鬼两位大 ...

  3. 【iOS】7.4 定位服务->2.1.3.2 定位 - 官方框架CoreLocation 功能2:地理编码和反地理编码

    本文并非最终版本,如果想要关注更新或更正的内容请关注文集,联系方式详见文末,如有疏忽和遗漏,欢迎指正. 本文相关目录: ================== 所属文集:[iOS]07 设备工具 === ...

  4. C#传递委托给C或C++库报错__对XXX类型的已垃圾回收委托进行了回调

    出现的原因: 因为你传给C或C++的委托是局部的.可能传过去之后就被垃圾回收了,再次调用就会异常. 想办法做成全局的就好 public void Play(string url) { _bassStr ...

  5. UI自动化测试表单重要代码

    public class frame { public static void main(String[] args) { // TODO Auto-generated method stub Sys ...

  6. JavaScript入门必备

    1.JavaScript和Java没有关系,JavaScript是一门(客服端)脚本语言,并且是一个解释性语言. 2.添加JavaScript的方法 (1)内联:通过<script>js代 ...

  7. xgboost-python参数深入理解

    由于在工作中应用到xgboost做特征训练预测,因此需要深入理解xgboost训练过程中的参数的意思和影响. 通过search,https://www.analyticsvidhya.com/blog ...

  8. JavaEE开发之Spring中Bean的作用域、Init和Destroy方法以及Spring-EL表达式

    上篇博客我们聊了<JavaEE开发之Spring中的依赖注入以及AOP>,本篇博客我们就来聊一下Spring框架中的Bean的作用域以及Bean的Init和Destroy方法,然后在聊一下 ...

  9. js鼠标滑轮侧边广告(仅IE可用)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. 【笔记】归纳js getcomputedStyle, currentStyle 以及其相关用法

      好吧,鉴于前端则个行业知识宽度广而深,早期看过高程介绍过的获取元素计算后的最终样式(浏览器显示的最终样式)的方法现在也忘得七七八八了 于是百度了一下,看了一下大神张鑫旭的博客,这里写个随笔记录一下 ...