• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > css控制背景示例(css设置背景图片、设置背景颜色)

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

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含css,设置背景颜色等相关知识,佚名 希望在学习及工作中可以帮助到您

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

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


</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


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>


/*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更好的控制文本中局部区域的文本

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


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


您可能想查找下面的文章:

  • css小技巧
  • 各大网站CSS初始化代码
  • css权重问题
  • CSS实现鼠标上移图标旋转效果
  • 使用CSS3制作一个简单的进度条(demo)
  • 用纯CSS实现饼状Loading等待图效果
  • 利用CSS3伪元素实现逐渐发光的方格边框
  • CSS3实现内凹圆角的实例代码
  • 利用HTML5+CSS3实现3D转换效果实例详解
  • css3+伪元素实现鼠标移入时下划线向两边展开的效果

相关文章

  • 2017-08-06css 列表菜单的设计
  • 2017-08-06通过css属性margin:auto让Div中的Table居中
  • 2017-08-06给table的tr添加border-top时没有效果的解决方法
  • 2017-08-06css中替换元素和不可替换元素及显示元素详细探讨
  • 2017-08-06CSS使用图片美化的漂亮菜单效果
  • 2017-08-06IE6不支持position:fixed bug的完美解决
  • 2017-08-06CSS解决页面图片水平垂直居中问题的方法
  • 2017-08-06CSS实现鼠标滑过文字弹出一段说明文字无JS代码
  • 2017-08-06css3的transform造成z-index无效解决方案
  • 2017-08-06css 条件注释区分非IE浏览器

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • css float浮动属性的深入研究及详解拓展(二)
    • css中 中文字体相关知识汇总
    • CSS字符编码引起乱码的快速解决方法
    • 举例详解CSS中的的优先级
    • 谨慎使用CSS中的星号(*)通配符
    • css3实现背景图片拉伸效果像桌面壁纸一样
    • IE6下Select元素被div等元素覆盖的解决办法
    • CSS样式设置div滚动条示例代码
    • CSS网页布局时常犯的几种小错误小结
    • select下拉菜单option文字粗体的实现方法

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有