background的使用方法

大家好,本人是一名技术小白,每周在学习h5之余,会在学习的内容中抽出些知识点跟大家分享,希望有机会帮到一些朋友,不足之处也希望大家多多指正.

今天给大家分享的是background(背景)的五个属性,分别是background-color(背景颜色)、background-image(背景图片)、background-repeat(背景平铺)、background-position(背景位置)、background-attachment(背景固定);这五项在日常应用中用的比较多,兼容性也比较好,所以针对这五项分享一下.

一、Background-color(背景颜色):

Background-color(背景颜色)的使用和color(字体颜色)类似,可用三种方式:

1.十六进制-如:””#fffff”,注明(六个相同数字及字母可缩写为三个-如:”fff”).

2.RGB-如:”rgb(255,255,255)”.

3.颜色名称-如:”red”.

二、background-image(背景图片):

示范:background-image:url(图片地址);

图片初始位置为父级元素的左上角.

这个属性较为简单,需要找准图片所在位置,单纯记忆就可.

三、background-repeat(背景平铺):

示范:background-repeat: no-repeat.

此项共有五个属性:repeat(平铺)/no repeat(不平铺)/repeat-x(x轴平铺)/repeat-y(y轴平铺)/inherit(父级继承).

repeat:背景图片会按照自身尺寸铺满整个父级元素,当自身尺寸比父级元素大时,则会显示一部分.

no-repeat:顾名思义,背景图片会根据自身尺寸单张出现在父级元素,不会铺满.

repeat-x:背景图片根据自身尺寸沿x轴铺满.

repeat-y:背景图片根据自身尺寸沿y轴铺满.

inherit:指定background-repeat属性设置应该从父元素继承.

四、background-position(背景位置):

此项共有四种形式可供选择:

1.英文单词-如:background-position:left top;(数值不分前后,根据方向划分.)

2.百分比-如:background-position:x% y%;(第一个值是水平位置，第二个值是垂直.左上角是0％0％.右下角是100％100％.如果仅指定了一个值，其他值将是50％.默认为0% 0%)

3.数值式-如:background-position:0px 0px;(第一个值是水平位置，第二个值是垂直.左上角是0.单位可以是像素（0px0px）或任何其他 CSS单位.如果仅指定了一个值，其他值将是50％.百分比、数值可混用)

4.inherit:指定background-repeat属性设置应该从父元素继承.

五、background-attachment(背景固定):

此项共有四种形式可供选择:scroll(滚动)/fixed(固定)/iocal(滚动条内固定)/inherit(父级继承).

1.background-attachment:scroll;(背景图片跟随页面的滚动而滚走,跟随原来的位置.默认值.)

2.background-attachment:fixed;(页面滚动时,背景图片固定在父级元素的某个位置)

3.background-attachment:iocal;(背景图片会随着元素内容的滚动而滚走,跟随原来的位置.)

4.background-attachment:inherit;(指定background-repeat属性设置应该从父元素继承.)

最后还有五项属性的优化写法分享给大家:

示范:background:yellow url(图片位置) no-repeat center center fixed;

这是一个背景图片的书写方法;

如果一个父级元素内有两个乃至多个背景图片的书写需求的话请看下列示范:

示范:background: url(图片位置) no-repeat center center fixed,url(图片位置) no-repeat center center fixed yellow;

两个以上的背景图片中间用逗号隔开,然后继续书写.

需要注意的是,背景颜色需要放在最后一项的最后一个,否则颜色不会出现.

以上就是本次的分享,希望大家能够喜欢!也感谢大家的驻足观看!

background的使用方法相关推荐

Img与background的区别
今天做项目中,用background显示了二维码和一些文字,但显示到页面上时,二维码和图片都变得模糊了.于是将图片调整.放大,但在放大后,作为背景图片的它则显示不全,无奈之下用了backgroung- ...
CSS 实现左侧固定，右侧自适应两栏布局的方法
"左边固定,右边自适应的两栏布局",其中有老生常谈的float方法,BFC方法,也有CSS3的flex布局与grid布局.并非所有的布局都会在开发中使用,但是其中也会涉及一些知识点 ...
CSS三栏布局的四种方法
1.绝对定位法 <div class="left">Left</div> <div class="main">Main< ...
活学活用，CSS清除浮动的4种方法
清除浮动这个问题,做前端的应该再熟悉不过了,咱是个新人,所以还是记个笔记,做个积累,努力学习向大神靠近. CSS清除浮动的方法网上一搜,大概有N多种,用过几种,说下个人感受. 1.结尾处加空div标签 ...
opencv 图像抠图算法_人工智能 | 不用绿幕也能实时抠图，商汤等提出只需单张图像、单个模型的新方法MODNet...
openEA开源周刊 openEA开源社区的官方运营载体这里每天给大家呈现有价值的开源资讯,欢迎您的来稿与推荐,点击上方蓝色字,加入我们吧! 摘要:近日,香港城市大学和商汤提出一种新型人像抠图方法 ...
多种方法实现自适应布局
最近切了几个手机端的网页,第一次切的是美团的首页,为了自适应不同的手机分辨率,需要用到自适应布局,切图的时候是用的第一中方法,用到了定位,后来查找了一些其他方法,现在就介绍几种自适应布局的实现方法: ...
CSS: div高度自动适应背景图片的高度 How to get div height to auto-adjust to background size?...
原文:CSS: div高度自动适应背景图片的高度 How to get div height to auto-adjust to background size? 其实方法非常简单,直接写代码: &l ...
前端优化-Img与background
当img 遇到 background,这个世界就是这么小~~~~~ 1 从解析机制看 Img属于html标签,background是css方法.一个页面由html.css.js组成,按照浏览器解析机制 ...
css与背景相关的属性有哪些,css的背景background的相关属性
今天需要做一个占满设备宽度的轮播图,这里作为demo仅展示一张图,下面分别是要操作的图片(这里做了缩放处理,实际的图比较大),以及要实现的效果图,很明显两者是不成比例的: (图一) (图 ...
标梵详解CSS去除浮动的方法
作为一名前端的开发者,都会有一段让人喜欢的书写代码的方式.以前,小D刚开始接触网站程序设计与制作这个课程时,每当要让一个div向左移动或者向右移动,左对齐或者右对齐,小D都特别喜欢使用float:le ...

background的使用方法

background的使用方法相关推荐

最新文章

热门文章