css控制背景示例(css设置背景图片、设置背景颜色)

所属分类: 网页制作 / CSS 阅读数: 1189
收藏 0 赞 0 分享

一、设置背景颜色:background-color

十六进制 background-color:#ff0000;
英文名称 background-color:red;
三原色 background-color:rgb(255,0,0)
transparent background-color:transparent;透明


复制代码
代码如下:

<style type="text/css">
h1{ background-color:rgb(255,0,0);}
</style>
</head></p> <p><body>
<h1>李克强主持召开<span>国务院</span>常务会议</h1>
</body>

二、设置背景图片:

1.引入背景图片:background-image
URL background-image:url("bg.jpg")
none 不设置背景图片


2.设置背景图片的平铺方式:background-repeat
repeat 将背景图案填满整个背景。
repeat-x 将背景图案在水平方向添满
repeat-y 将背景图案在垂直方向添满。
no-repeat 图案只出现一次。


3.设置背景图片的位置:background-position
top left 设置背景图案出现在上左方。
top center 设置背景图案出现在上方中间。
top right 设置背景图案出现在上右方。
center left 设置背景图案出现在中间左方。
center center 设置背景图案出现在IE中间。
center right 设置背景图案出现中间右方。
bottom left 设置背景图案出现在下左方。
bottom 设置背景图案出现在正下方。
bottom right 设置背景图案出现在下右方。

也可以通过坐标准确的定位图片的位置(x,y) x水平方方向的位置 y垂直方向的位置,单位是像素(px)


4.设置背景图像是否会随视窗滚动而滚动:background-attachment
scroll 设置背景图像会随视窗滚动条的移动而移动(默认)。
fixed 设置背景图像不会随视窗滚动条的移动而移动。

背景图案简化格式:颜色 背景图片 repeat attachment position


复制代码
代码如下:

<style type="text/css">
body{
background-image:url(fads.png);
background-repeat:no-repeat;
background-position:center right;
background-attachment:fixed;</p> <p>/*background:url(fads.png) no-repeat fixed center right; 简化方案*/
}
</style>
</head>
<body>
<p>48、完美的男友:不吸烟,不喝酒,不欺骗。不存在!</p>
<p>49、人生就像一块破铜烂铁,把它扔进火里,敲敲打打,也能炼出一副精品!</p>
<p>50、话说动物园有一只猴子,奇丑无比,人见人吐!第二天我去看了,我吐了!第三天你去了,猴子吐了!</p>
<p>25、哥是文明人,所有脏话均已使用唾液消毒。
</p>
<p>26、名人名言,你得先是名人了那才是名言,别人的屁都是名屁!你能比吗?
</p>
<p>27、您都好意思撒谎了,我哪敢好意思不信呢?
</p>
<p>28、为什么我眼里常含眼屎,那是我对睡眠爱的深沉。
</p>
<p>29、别以为你比我年轻,你就能多蹦跶几天,棺材装的是死人不是老人!
</p>
<p>30、我是穷人,请勿盗墓!</p>
<p> 31、有时候老天下一场雨,是因为世界需要洗一洗;有时候眼睛下雨了,是因为心需要洗一洗!
</p>
<p>32、站在岁月的岸边,向自己的过往打个水漂吧……</p>
<p>33、2011我娶你,2012我保护你,2013爱你一生,2014爱你一世! </p>
<p>34、人生就像一场旅行,在乎的不是目的地。而是沿途的"SB",以及对付"SB"时的心情! </p>
<p>35、臭男人都喜欢骚女人。</p>
<p> 36、系好安全带,前方也许有场爱情正等着你。 </p>
<p>37、枕着打印机睡,就能打印出一整夜的梦吧? </p>
<p>38、没有强大的主人,别以为你是狗就可以乱咬人!</p>
<p> 39、我只顾着往后看,却没有在意前面的路有多长。 </p>
<p>40、最近神马开始变驴腿了,浮云变雨水了!</p>
<p> 41、昨天是历史,今天是开始,明天谁都不好使! </p>
<p>42、还是10086对我好,我给他发一条对短信,他给我回3条。 </p>
<p>43、靠山吃山,靠水吃水,今天抢劫,不许不给,谁要反抗,让他见鬼。 </p>
<p>44、今天MM的生日,为了第一个送上祝福,凌晨我准时拿起手机发了一条信息:沙发。 </p>
<p>45、知道高晓松为啥喝醉酒不?那是因为药家鑫想让他唱一首"同牢的你"。</p>
<p> 46、地铁上的广告:挤吗?买辆车吧!出租车上的广告:赌吗?坐地铁吧!靠,忽悠我还是怎么着! </p>
<p>47、一般般的我,一般般的亮。一般般的你,我看不上!</p>
</body>


复制代码
代码如下:

<style type="text/css">
div{
width:800px;
height:600px;
background-color:#ccc;
background-image:url(fads.png);
background-repeat:no-repeat;
background-position:topright;
/*background-attachment:fixed;当给一个div设置背景是使用该属性有可能无效*/</p> <p>/*background:url(fads.png)no-repeatfixedcenterright;简化方案*/
}
</style>
</head>
<body>
<div>
<p>35、臭男人都喜欢骚女人。</p>
<p>36、系好安全带,前方也许有场爱情正等着你。</p>
<p>37、枕着打印机睡,就能打印出一整夜的梦吧?</p>
<p>38、没有强大的主人,别以为你是狗就可以乱咬人!</p>
<p>39、我只顾着往后看,却没有在意前面的路有多长。</p>
<p>40、最近神马开始变驴腿了,浮云变雨水了!</p>
<p>41、昨天是历史,今天是开始,明天谁都不好使!</p>
<p>42、还是10086对我好,我给他发一条对短信,他给我回3条。</p>
<p>43、靠山吃山,靠水吃水,今天抢劫,不许不给,谁要反抗,让他见鬼。</p>
<p>44、今天MM的生日,为了第一个送上祝福,凌晨我准时拿起手机发了一条信息:沙发。</p>
<p>45、知道高晓松为啥喝醉酒不?那是因为药家鑫想让他唱一首"同牢的你"。</p>
<p>46、地铁上的广告:挤吗?买辆车吧!出租车上的广告:赌吗?坐地铁吧!靠,忽悠我还是怎么着!</p>
<p>47、一般般的我,一般般的亮。一般般的你,我看不上!</p>
</div>
</body>

三、练习:

1、使用span更好的控制文本中局部区域的文本

复制代码
代码如下:

<span>文本内容</span>
<styletype="text/css">
divspan{background:red}
</style>
</head>
<body>
<div>
35、臭男人都<span>喜欢</span>骚女人。
</div>

2、使用display属性提供区块转换


复制代码
代码如下:

<styletype="text/css">
span{
color:#0C0;
width:100px;
height:100px;
background-color:#900;
display:block;/*内联转换为区块*/
}
div{
background-color:#F63;
width:300px;
height:50px;
display:inline;/*区块转换为内联,width和height的属性就无效了*/
}
</style>
</head>
<body>
<span>使用span更好的控制文本中局部区域的文本</span>
<br/>
<!--使用display属性提供区块转换--inline,block,none(不占位的隐藏)内联标记设置长宽高没效果-->
<span>使用display属性提供区块转换</span>
<div>使用display属性提供区块转换</div>
</body>

3、给标题加上一个小图标(最好使用背景来添加图标)


复制代码
代码如下:

<styletype="text/css">
h5{
background:url(das.gif)no-repeatleftcenter;
padding-left:20px;
}
</style>
</head>
<body>
<h5>给我加个小图标吧</h5>
</body>

更多精彩内容其他人还在看

2013年五大主流浏览器 HTML5 与 CSS3 兼容性大比拼

这篇文章主要介绍了2013年五大主流浏览器 HTML5 和 CSS3 兼容性大比拼,需要的朋友可以参考下
收藏 0 赞 0 分享

前端设计师需要了解的9个问题

这篇文章主要介绍了前端设计师需要了解的9个问题以及注意事项,非常的实用,是篇非常不错的文章,这里推荐给大家
收藏 0 赞 0 分享

CSS强制性换行的方法区别详解

自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法对于div,p等块级元素正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行
收藏 0 赞 0 分享

CSS语义化命名方式及常用命名规则

本文搜集了一些CSS语义化命名方式以及命名规则。如有错误或不妥之处,敬请指出,欢迎你提出更好的建议,加插更多的命名规范。
收藏 0 赞 0 分享

ul li内容宽度的问题的解决方案

在IE6下只要我设置LI的宽度为auto,不论LI里面的内容多长,LI的宽度始终是100%,即UL的宽度(这里我已经写死了UL的宽度)。设置max-width也没用。高手们,在IE系列浏览器中如何使LI的宽度真正的随着内容增长而增长呢?像FF那样。
收藏 0 赞 0 分享

html5+css3气泡组件的实现

本文是html5+css3系列教程的第一篇,给大家讲述html5+css3实现气泡组件,讲解的十分的详细,这里推荐给大家,希望对大家能有所帮助
收藏 0 赞 0 分享

html5+css3之CSS中的布局与Header的实现

本文从CSS3的布局(CSS的布局的演化、CSS3盒模型-box-sizing、float布局中的bfc、Flexbox简介)Header布局的实现(float实现布局、Header js的实现)向我们展示了HTML5与CSS3的魅力。
收藏 0 赞 0 分享

一款恶搞头像特效的制作过程 利用css3和jquery

今天给大家介绍一款恶搞头像特效的制作过程,你可以把任意一张照片放到跳舞的漫画中,为他带上不同的帽子,让他翩翩起舞,下面我们一起来看一下制作过程和效果
收藏 0 赞 0 分享

大图片根据分辨率自适应宽度仍居中显示

一个1920*900的大图,在1024*768的分辨率下仍居中显示,如何做到这一点,下面是一个可行的解决方案
收藏 0 赞 0 分享

CSS3提交意见输入框样式代码

这个提交意见输入框,结构使用到了table,样式用的css3,包含了多方面的知识,比较适合新手朋友们
收藏 0 赞 0 分享
查看更多