html图片背景属性 css 背景(background)属性 背景图定位

background属性：

Background属性是css中应用比较多，且比较重要的一个属性，它是负责给盒子设置背景图上和背景颜色的，background是一个复合属性，它可以分解成如下几个设置项：

(1)background-color 设置背景颜色

(2)background-image 设置背景图片地址

(3)background-repeat 设置背景图片如何重复平铺

(4)background-position 设置背景图片的位置

(5)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;各设置项用空格隔开，有的设置项也可以不写，它会使用默认值。

background-size使用：

--length:

固定的值，如：100px 100px

--percentage:

百分比，如：90% 90%

--cover:

背景图片的较小边放大到目标大小结束

--contain:

背景图片的较大边放大到目标大小结束

代码：

background属性

.box{

width:400px;

height:200px;

border:1px solid #000;

margin:50px auto 0;

/* 设置背景图片 */

background-image:url("images/头像2.png");

/* repeat-x:只平铺x轴方向 */

/*background-repeat:repeat-x; */

/* repeat-y:只平铺y轴方向 */

/*background-repeat:repeat-y;*/

/* no-repeat:只平铺一次 */

background-repeat:no-repeat;

/* repeat:默认值 平铺所有的 */

/*background-repeat:repeat;*/

/* 设置背景图片的位置,第一个参数表示水平方向、第二个参数表示垂直方向的位置

水平方向：left center right

垂直方向：top center bottom

*/

/*background-position:center center; /left:左右位置 top:上下位置 *!*/

/* background-position可以是方向词，也可以是数值 */

/*background-position:30px 10px;*/

/*background-position:-10px 20px;*/

/* 合并写法： */

background:url("images/头像2.png") -10px 10px no-repeat cyan;

}

背景图片

页面效果：

背景图定位代码：

背景定位

.box{

width:200px;

height:200px;

border:2px solid black;

margin:50px auto 0;

background-image:url("images/hellokity.jpg");

background-repeat:no-repeat;

background-position:-159px -491px;

}

关于html与css的标签及属性(text文本属性、背景background属性、表格标签table、列表、)

text文本属性1.颜色 colorcolor:red: 2.文本缩进text-indant属性值 num+px text-indant:10px:3.文本修饰 text-decoration属性值: ...

CSS背景和CSS3背景background属性

css背景属性用于定义HTML元素的背景 背景属性既可以为单个的单元设置背景,也可以为整个页面设置背景,可以对上述二者的任意组合设置背景,段落.文字.不同状态的链接.图像.内容区域修改其背景样式.设置 ...

CSS中background属性详解

CSS背景属性 background css 说明 background-image:url(图片的网址); 背景图 background: url( 图片的网址 ); 背景 background-c ...

深入学习css之background属性

css中允许应用纯色作为背景,也允许使用图片作为背景. background一共有8个对应的属性: 1.background-color:颜色值 用于设定背景的颜色 有3种定义颜色的形式, 1,颜色 ...

CSS之样式属性(背景固定、圆形头像、模态框)

CSS属性 一.宽和高 width属性可以为元素设置宽度. height属性可以为元素设置高度. 块级标签才能设置宽度,内联标签的宽度由内容来决定. div {width: 1000px;backgr ...

CSS之background属性

css背景是个很有意思的东西,可设置 背景色:background-color 背景图:backgoround-image 背景图显示相对位置:background-position,正数图片往右下移 ...

CSS背景background、background-position使用详解

背景(background)是css中一个重要的的部分,也是需要知道的css的基础知识之一.这篇文章将会涉及css背景(background)的基本用法,包括诸如 background-attachm ...

CSS背景background详解，background-position详解

背景(background)是css中一个重要的的部分,也是需要知道的css的基础知识之一.这篇文章将会涉及css背景(background)的基本用法,包括诸如 background-attachm ...

css常用样式背景background如何使用

css背景background属性常用于定义HTML的背景,background简写属性作用是将背景属性设置在一个声明中,background背景属性常见为以下这些:.background-color ...

随机推荐

U3D笔记11:47 /11/30-15:15 /12/19

11:47 /11/30Before you can load a level you have to add it to the list of levels used in the gam ...

stapes文档翻译

1.引言 写一个Stapes 模型如下: 2.创建方法 这些方法用来帮助创建和扩展类或模块.这些术语在文档中可交换的. subclass Module.subclass([object]) st ...

cstring 的重载

#include #include using namespace std; +; class MyString { public ...

jenkins 设置权限后管理员登陆提示：Access Denied admin没有Overall/Read权限

jenkins 设置权限后,管理员登陆提示:Access Denied admin没有Overall/Read权限 处理办法: window下编辑 xml 配置文件:%userprofile%\. ...

dotnet Core 异步任务

使用线程池中线程的任务启动方式 线程池提供了一个后台线程的池,独自管理线程,按需增加或减少线程池中的线程数.线程池中的线程用于执行一些动作后仍然返回线程池中. using System; using ...

H5拖动火狐自动打开新标签

写在前面的话:

原因是为什么百度很多了我就不细说,本文章只说我自己的解决方法... 自定义数据里写个链接,如果火狐自动打开就跳到这个链接 这个页面就写一句话:关 ...

git小技巧--如何从其他分支merge个别文件或文件夹

在实际工作中,一个大型的项目或版本迭代可能不是一次上线,可能会分好几次上线,这时候就会涉及创建多个分支,进行分别开发. 创建分支 功能分为2个分支,分别为A.B. A上面有个列表页功能 B上面有个详情 ...

MYSQL中替换oracle中runum用法

一 . SELECT * FROM (SELECT A.*, rownum AS RN FROM (SELECT (@rownum := @rownum + 1) AS rownum, B.LL11, ...

[codecademy]fonts in css

Great job! You learned how to style an important aspect of the user experience: fonts! Let's review ...

爬虫--requeste

1.requeste模块,是我们Python对我们爬虫有好的一面,,其主要作用是用来模拟浏览器发起请求.功能强大,用法简洁高效.在爬虫领域中占据着半壁江山的地位.没有的话直接pip3install ...