欢迎来到酱油妹!织梦模板,dede模板下载,织梦cms模板,免费网站模板下载站

酱油妹

CSS 背景(css background)

企业模板

CSS 背景

-

CSS background

CSS background目录 CSS背景语法 css背景色 css背景图片 背景居中 复合背景样式简写 背景background概要

1、Css background背景语法 - TOP

背景语法:
background: background-color || background-image || background-repeat || background-attachment || background-position

CSS背景入门知识

CSS 背景这里指通过CSS对对象设置背景属性,如通过CSS设置背景各种样式。

Background背景样式的值是复合属性值组合,也就是背景单词的值可以跟多个属性值,值与值之间用一个空格间隔链接上即可。
如:
background:#000 url(图片地址) no-repeat left TOP

CSS中背景单词:


background CSS手册查看-background手册
background-color 设置颜色作为对象背景颜色
background-image 设置图片作为背景图片
background-repeat 设置背景平铺重复方向
background-attachment 设置或检索背景图像是随对象内容滚动还是固定的。
background-position 设置或检索对象的背景图像地方。

Background剖析分析图

Css background背景用途:


1、设置纯色背景。背景background可以设置对象纯色的背景颜色,
2、设置图为背景。可以设置对象背景为图片,假如背景是图片可以让图片重复平铺横铺,或将图片作为对象背景固定在对象任何地方。

Html原始背景与CSS背景对照
Html是指对应成效的table背景设置

CSS 背景(css background)
Css background复合背景结构剖析图

Body{background:#FFFurl(http://www.pcss5.com/img201301/pcss5-logo-2013.gif)no-repeat00fixed}

设置网页背景样式

最原始HTML背景设置演示代码:


Html背景单词:


Bgcolor

设置背景颜色 与CSS背景颜色对应background-color

Background

设置图片作为背景与CSS背景图片对应background-image

<tablebgcolor="#996600"><tr><tdbackground="http://www.pcss5.com/img/css-logo.gif"width="130"height="100">&nbsp;</td></tr></table>

若是给table设置背景颜色可以用bgcolor="颜色值"即可设置对象背景颜色。
若是CSS背景颜色,可用background-color:颜色值;或 background:颜色值设置对象背景颜色。
CSS 背景颜色设置DIV+CSS演示图:

这里设置了table背景颜色为#996600,然后设置了td的背景图片为http://www.pcss5.com/img/css-logo.gif

2、背景颜色 - TOP

background-color:#FFF

p{background-color:#FFF}

设置对象背景为纯白色

background:url(http://www.pcss5.com/img/logo.gif);设置酱油妹的LOGO图片作为背景

background-image:url(http://www.pcss5.com/img/logo.gif);具备相同成效。如此设置图片作为背景有个缺点就是图片会上下左右的重复,下面大家仅需看以下图例课程即可学会CSS background

CSS 背景(css background)
以上截图分别用background-color和background来设置对象背景颜色

3、CSS图片背景 - TOP

这里说的是以图片作为背景图片 - CSS 背景图片详细介绍:http://www.pcss5.com/jiqiao/j80.shtml
CSS可以用background或background-image直接引用图片地址来设置图片作为对象背景。

达成这个成效用CSS单词是background-attachment 当然一般情况下背景默认是固定的若是自己用CSS background简写则如上图。
background-attachment用分析:
background-attachment:fixed; 背景固定
background-attachment:scroll css背景图片是随对象内容滚动

CSS 背景(css background)
图片背景样式(固定、滚动)

background-image :url (url)
background-image :url (http://www.pcss5.com/img201301/pcss5-logo-2013.gif)设置对象背景为图片http://www.pcss5.com/img201301/pcss5-logo-2013.gif

图片background背景语法:

2、图片设置为背景简写

假如图片作为背景时候需要是不是重复平铺,平铺方向等大家都需要background-position和background-repeat配合用

p{background-image:url(http://www.pcss5.com/img201301/pcss5-logo-2013.gif);
background-repeat:no-repeat;background-position:5px6px}

这里概念对象p,背景图片为http://www.pcss5.com/img201301/pcss5-logo-2013.gif,并且背景图片不重复,定坐落于p对象靠左距离5px,靠上距离6px

4、DIV CSS背景居中 - TOP

CSS 背景分为左右居中和上下居中,具体左右居中办法见上图。
背景图像上下居中,可以用计算上下高度然后平分设置,如上下高度距离为500px,那就设置图片居顶部多少PX可以让图片达成上下居中。

5、复合背景样式简写 - TOP

大家用时候都需要考虑到代码优简,这里可以优化的简写代码
1、假如只设置背景为单一颜色
background-color:#FFF 大家简写为 background:#FFF

background-image:url(http://www.pcss5.com/img201301/pcss5-logo-2013.gif);
background-repeat:no-repeat;background-position:5px6px

1、设置图片作为背景假如图片设置图片在X坐标方向重复,假如再设置图片在对象地方的左或右地方时将无效,可设置在对象上或下地方开始显示。

大家简写为:

background:url(http://www.pcss5.com/img201301/pcss5-logo-2013.gif)no-repeat5px6px

6、CSS background(背景)概要 - TOP

用图片作为背景在一个网站布局中常常会遇见,期望大伙能在实质中学会其常识。通常设置对象图片作为背景属性实例 background:#666 url(图片地址) no-repeat center TOP ;(讲解第一设置背景颜色 紧跟设置图片作背景 紧跟图片是不是重复 然后跟图片在对象地方。前面的背景颜色可以不需要设同时不是需要,通常用图片作为对象背景假如要设置图片是不是重复显示距离地方将设置图片地方)

3、假如设置背景完全重复显示,那设置图片在对象上下左右地方开始显示将无线。

2、设置图片作为背景假如图片设置图片在Y坐标方向重复,假如再设置图片在对象地方的上或下地方时将无效,可设置图片在对象左或右地方开始显示。

经典背景复合属性表达式:

网站布局时候大家常常对网页背景设置颜色、背景设置图片,达到大家需要的美观成效,大家实践制作写css background背景尽可能从简,图片引入时候注意路径正确,如需定位对象背景。

.pcss5{background:#FFFurl(http://www.pcss5.com/img201301/pcss5-logo-2013.gif)no-repeat5px6px}

期望大伙好好理解有不懂的地方可以进入CSS 研教室讨论区发表问题,大家将尽力回话你。

这里既设置背景颜色,背景图片引入,背景图片定位、图片作为背景是不是重复的样式。

有关CSS背景课程文章:
1、CSS背景颜色与背景图片
2、DIV背景颜色设置
3、ie6 png背景透明解决
4、p css背景颜色不显示
5、css隐藏背景图片上方文字
6、css p达成鼠标移动到超链接上背景变化
7、cssbackground-position课程


希望以上内容可以解决您的问题!
如有其他问题欢迎大家一起交流学习!
作者:酱油妹 来源:www.jiangyoumei.com 关注: 时间:2021-05-16 22:00
版权声明:凡注明来源为www.jiangyoumei.com的均为本站原创,转载请注明来源。
本文网址:http://www.jiangyoumei.com/CSS/CSSjichu/20210516/12672.html
凡本站提供教程均已验证教程的准确性。
相关教程
在线客服

织梦模板 整站模板 新手教程 使用技巧