CSS背景属性 background css 说明 background-image:url(图片的网址); 背景图 background: url( 图片的网址 ); 背景 background-color:#色码; 背景色彩 Exp: background-image:url(背景图案.jpg,gif,bmp); background-color:#FFFFFF; background-color : tra
 

CSS背景属性 background

css 说明
background-image:url("图片的网址"); 背景图
background: url(" 图片的网址 "); 背景
background-color:#色码; 背景色彩

Exp:
background-image:url(背景图案.jpg,gif,bmp);
background-color:#FFFFFF;
background-color : transparent; <--设定背景为透明色

--------------------------------------------------------------------------------

background-repeat 改变背景图片的重复并排的设定

css
说明
repeat 背景图片并排
repeat-x 背景图片以X方向 并排
repeat-y 背景图片以Y方向 并排
no-repeat 背景图片不 以并排的方式处理

Exp:
background-image:url("http://www.dedecms.com/xx.gif");
background-repeat:no-repeat;
以http://www.dedecms.com/xx.gif这张图片为背景,当图片大小不够的时候,不并排重复

--------------------------------------------------------------------------------

background-attachment是否固定图片位置

css
说明
scroll 拉动卷轴时,背景图片会跟着移动(缺省值)
fixed 拉动卷轴时,背景图片不会跟着移动

Exp:
background-image:url("http://www.dedecms.com/xx.gif");
background-repeat:no-repeat;
background-attachment:fixed;
以http://www.dedecms.com/xx.gif背景图片不重复并列,且不随卷轴移动

--------------------------------------------------------------------------------

以长度定位background-position: x y
使用百分比定位 background-position: x% y%

css
说明
x% 往右移
y% 往下移
backgroud-position: 0% 0%; 左边上方
backgroud-position: 0% 50%; 左边中间
backgroud-position: 50% 0%; 中间上方
backgroud-position: 50% 50%; 正中间
backgroud-position:100% 0%; 右边上方
backgroud-position: 0% 100%; 左边下方
backgroud-position: 100% 50%; 右边中间
backgroud-position: 50% 100%; 中间下方
backgroud-position: 100% 100%; 右边下方

以关键字定位
关键字 说明
top 上 ( y = 0 )
center 中 ( x = 50, y = 50 )
bottom 下 ( y = 100 )
left 左 ( x= 0 )

Exp:
background-position:center;
图片在指定背景中央X=50% Y=50%位置
background-position: 200px 30px

background-clip 属性

规定背景的绘制区域:

div
{
background-color:yellow;
background-clip:content-box;
}

border-box,padding-box,content-box

CSS background-size 属性详解

摘要:  cssbackground-size 属性详解,background-size 指定背景图像大小,以象素或百分比显示,当指定为百分比时,大小会由所在区域的宽度、高度以及 background-origin 的位置决定,还可以通过 cover 和 contain 来对图片

css background-size 属性详解,background-size
指定背景图像大小,以象素或百分比显示,当指定为百分比时,大小会由所在区域的宽度、高度以及 background-origin
的位置决定,还可以通过 cover 和 contain 来对图片进行伸缩。

background-size 属性

1、定义:

background-size 用来调整背景图像的尺寸大小。

2、语法:

以下为引用内容:
background-size : contain | cover | 100px 100px | 50% 100%;

3、参数:

background-size:contain; // 缩小图片来适应元素的尺寸(保持像素的长宽比);
   
background-size :cover; // 扩展图片来填满元素(保持像素的长宽比);
   
background-size :100px 100px; // 调整图片到指定大小;
   
background-size :50% 100%; // 调整图片到指定大小,百分比相对于包含元素的尺寸。

4、浏览器兼容:

IE
和遨游不支持;
    Firefox
添加私有属性 -moz-background-size 支持;
    Safari 和
Chrome 添加私有属性 -webkit-background-size 支持;
    Opera 不支持
background-size 属性,添加其私有属性 -o-background-size 也不支持。

5、示例:

以下为引用内容:
div{
   background:#00ff00
url(img.jpg) no-repeat;
   background-size:60% 80%;
   -moz-background-size:60%
80%;
   -webkit-background-size:60%
80%;
   -o-background-size:60%
80%;
}

CSS中background属性详解的更多相关文章

  1. DIV css中cursor属性详解-鼠标移到图片变换鼠标形状 (转)

    css中cursor属性详解-鼠标移到图片变换鼠标形状   语法: cursor : auto | all-scroll | col-resize| crosshair | default | han ...

  2. css中border-sizing属性详解和应用

    box-sizing用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型.它有content-box.border-box和inherit三种取值.inherit指的是从父元素继承box-sizi ...

  3. Css盒模型属性详解(margin和padding)

    Css盒模型属性详解(margin和padding) 大家好,我是逆战班的一名学员,今天我来给大家分享一下关于盒模型的知识! 关于盒模型的属性详解及用法 盒模型基本属性有两个:padding和marg ...

  4. Javascript中prototype属性详解 (存)

    Javascript中prototype属性详解   在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Javascript语言体系中,是不 ...

  5. Android中shape属性详解

    一.简单使用 刚开始,就先不讲一堆标签的意义及用法,先简单看看shape标签怎么用. 1.新建shape文件 首先在res/drawable文件夹下,新建一个文件,命名为:shape_radius.x ...

  6. CSS3中border-image属性详解

    border-images可以说也是CSS3中的重量级属性,如同圆角.边框颜色属性border-color.块阴影属性一样,也是属于边框属性中的一员. 从其字面意思上看,我们可以理解为“边框-图片”, ...

  7. spring sessionFactory 属性配置详解,applicationContext中各种属性详解

    1.Bean的id为sessionFactory,对应的类为AnnotationSessionFactory,即采用注解的形式实现hibernate. 2.hibernateProperties,配置 ...

  8. css中em单位详解,说明

    em详解      em可以理解成“倍”. em会以父级元素中所设置的字体像素值为基准值进行成倍放大: 字体大小=(父级元素中的字体像素 * em的值) 例: 网页部分代码如下: 1.我现在没有在父级 ...

  9. Javascript中prototype属性详解

    在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Javascript语言体系中,是不存在类(Class)的概念的,javascript中不 ...

随机推荐

  1. js 计算快速统计中用到的日期

    前言 最近在做统计报表模块,其中查询条件用到了快速查询,主要为了方便客户统计查询常用的几个日期纬度,比如本周.上周.本月.上月.昨日. 使用js计算,主要用到了js Date. getDate().g ...

  2. ef学习一

    学习内容:https://www.cnblogs.com/5ishare/p/5801229.html 注意点: 1.NuGet程序包引入ef,使用DbSet<>必须引入ef.本例EFCo ...

  3. forfiles

    关键命令就这一条了:forfiles.exe /p "D:\Kugou" /m *.tar /d -14 /c "cmd /c del @path" 这条命令的 ...

  4. 使用Git Extensions简单入门Git

    前言 关于这个主题,之前我录了段视频教程,在本地看清晰度还可以,但传到优酷上就很不清晰了,即使是后来重制后还是一样不清晰,所以现在想整理成文字版.当然,大家还可以将我百度云上的视频下载下来观看,连同优 ...

  5. PowerDesigner V16.5 安装教程以及汉化(数据库建模)

    一.power designer是什么以及是干什么的? power designer是能进行数据库设计的强大的软件,是一款开发人员常用的数据库建模工具.分别从概念数据模型(Conceptual Dat ...

  6. mysql实践总结

    首先介绍mysql的安装和基本使用.进阶操作.讲解mysql的导入导出和自动备份,然后介绍安全模式修改密码和mysql的全文本搜索功能,最后记录了个人使用mysql中遇到的问题集,闲暇时我也会多看几次 ...

  7. css3 Box model 与 Box-sizing

    1.Box Model(盒模型) CSS中的Box Model分为两种:第一种是W3C的标准模型,另一种是IE的传统模型.它们的相同之处是对元素的width.height.padding.border ...

  8. Windows下使用Rtools编译R语言包

    使用devtools安装github中的R源代码时,经常会出各种错误,索性搜了一下怎么在Windows下直接打包,网上的资料也是参差不齐,以下是自己验证通过的. 一.下载Rtools 下载地址:htt ...

  9. Flutter 布局(十)- ListBody、ListView、CustomMultiChildLayout详解

    本文主要介绍Flutter布局中的ListBody.ListView.CustomMultiChildLayout控件,详细介绍了其布局行为以及使用场景,并对源码进行了分析. 1. ListBody ...

  10. (网页)AngularJS中【Error: [$rootScope:inprog]】的解决办法(转)

    转自CSDN: Error: [$rootScope:inprog] http://errors.angularjs.org/1.5.8/$rootScope/inprog?p0=%24apply 如 ...