背景的css代码,CSS 背景(示例代码)
CSS 背景属性用于定义HTML元素的背景。
CSS 属性定义背景效果:
background-color
background-image
background-repeat
background-attachment
background-position
背景颜色
background-color 属性定义了元素的背景颜色.
页面的背景颜色使用在body的选择器中:
实例
body {background-color:#b0c4de;}
尝试一下 »
CSS中,颜色值通常以以下方式定义:
十六进制 - 如:"#ff0000"
RGB - 如:"rgb(255,0,0)"
颜色名称 - 如:"red"
以下实例中, h1, p, 和 div 元素拥有不同的背景颜色:
实例
h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}
尝试一下 »
背景图像
background-image 属性描述了元素的背景图像.
默认情况下,背景图像进行平铺重复显示,以覆盖整个元素实体.
页面背景图片设置实例:
实例
body {background-image:url(‘paper.gif‘);}
尝试一下 »
下面是一个例子是一个糟糕的文字和背景图像组合。文本可读性差:
实例
body {background-image:url(‘bgdesert.jpg‘);}
尝试一下 »
背景图像 - 水平或垂直平铺
默认情况下 background-image 属性会在页面的水平或者垂直方向平铺。
一些图像如果在水平方向与垂直方向平铺,这样看起来很不协调,如下所示:
实例
body
{
background-image:url(‘gradient2.png‘);
}
尝试一下 »
如果图像只在水平方向平铺 (repeat-x), 页面背景会更好些:
实例
body
{
background-image:url(‘gradient2.png‘);
background-repeat:repeat-x;
}
尝试一下 »
背景图像- 设置定位与不平铺
让背景图像不影响文本的排版
如果你不想让图像平铺,你可以使用 background-repeat 属性:
实例
body
{
background-image:url(‘img_tree.png‘);
background-repeat:no-repeat;
}
尝试一下 »
以上实例中,背景图像与文本显示在同一个位置,为了让页面排版更加合理,不影响文本的阅读,我们可以改变图像的位置。
可以利用 background-position 属性改变图像在背景中的位置:
实例
body
{
background-image:url(‘img_tree.png‘);
background-repeat:no-repeat;
background-position:right top;
}
尝试一下 »
背景- 简写属性
在以上实例中我们可以看到页面的背景颜色通过了很多的属性来控制。
为了简化这些属性的代码,我们可以将这些属性合并在同一个属性中.
背景颜色的简写属性为 "background":
实例
body {background:#ffffff url(‘img_tree.png‘) no-repeat right top;}
尝试一下 »
当使用简写属性时,属性值的顺序为::
background-color
background-image
background-repeat
background-attachment
background-position
以上属性无需全部使用,你可以按照页面的实际需要使用.
这个实例使用了先前介绍的CSS,你可以查看相应实例: CSS 实例
更多实例
如何设置固定的背景图像
本例演示如何设置固定的背景图像。图像不会随着页面的其他部分滚动。
CSS 背景属性
Property描述
background
简写属性,作用是将背景属性设置在一个声明中。
background-attachment
背景图像是否固定或者随着页面的其余部分滚动。
background-color
设置元素的背景颜色。
background-image
把图像设置为背景。
background-position
设置背景图像的起始位置。
background-repeat
设置背景图像是否及如何重复。
背景的css代码,CSS 背景(示例代码)相关推荐
- 图片自动翻转css代码,用css实现图片翻转(示例代码)
简介这篇文章主要介绍了用css实现图片翻转(示例代码)以及相关的经验技巧,文章约1193字,浏览量447,点赞数1,值得参考! 用css实现图片翻转 .flip-container { perspec ...
- arcgis sample代码之SOE示例代码PageLayout REST Server Object Extension 的源码分析
0.前言 研究 arcgis object的代码是十分重要的,对于学习arcObject太重要了,因为没有这些代码,学习混乱的arcObject将会更佳的困难. 我的arcgis server 是10 ...
- css下波浪线的单词,CSS制作波浪线(示例代码)
建议先去了解清楚了径向渐变,线性渐变的用法先 这个作者的css制作波浪线讲解很不错额:https://www.jianshu.com/p/8570433e3669不理解的可以看看这个链接的额 可以去菜 ...
- 怎么精炼java代码_网页播放器开发(四)代码精炼提纯(示例代码)
四.精简提炼 我们的播放器基本实现了,但是代码复用不高,所以我们要进行封装,以插件的形式体现. 1.插件的基本运行代码如下: ;(function(undefined){'use strict'; . ...
- html代码圣诞树位置代码,html 圣诞树(示例代码)
简介这篇文章主要介绍了html 圣诞树(示例代码)以及相关的经验技巧,文章约1263字,浏览量499,点赞数8,值得推荐! div{ width:0px; height:0px; background ...
- unicode html转义字符,HTML转义字符 Unicode和CSS伪类介绍(示例代码)
CSS 伪类用于向某些选择器添加特殊的效果. a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /* 已访问的链接 */ ...
- css 手型 没生效,css各种手型集合(css禁止手型)(示例代码)
写这篇博客前不得不先吐槽下国内的技术性文章现状: 1:在国内真心缺少技术性的文章: 2:用百度搜技术性的文章真心不靠谱: 好吧:正题:下面是在国外搜刮来的:比较齐全的鼠标手型css:在国内的网站上是搜 ...
- html 载入服务器字体,css调用服务器端字体示例代码
css 怎么调用外部字体 在test页面打开的页面中添加一个class为anim的div代码.如下图所示: 在打开的页面找到接着设置an 比如我网页设置 微软雅黑 字体在我的电脑上安装了雅黑字体肯定能 ...
- css中的代码图标,认识CSS中字体图标(示例代码)
前端之HTML,CSS(十一) 字体图标 使用文字做出小图标的效果并超越了小图标应用精灵图,使得图标变得灵活,减少了请求次数,优化了界面的性能.字体图标本身为矢量图. 字体图标的使用过程 1.UI设计 ...
- html 控制边框长度,如何控制CSS边框长度的示例代码分享
CSS边框长度控制 CSS边框长度控制.以前需要边框长度比容器小一些时,我用p嵌套.后来发现伪类在实现这个效果时很方便,只需要一个p就够了,另外调整padding和margin都不会很麻烦. bord ...
最新文章
- Linux环境编程--进程通信
- python中pygame模块的Linux下安装过程
- 看好电影,学标准英语
- 今天在看慕课网的java学习路径
- 计算机重应用,装了一大堆应用,iPhone6会变重吗?
- DataGridComboBoxColumn控件
- 开源身份证识别_新的开源:金钱,公司和身份
- docker 日志_解决docker容器日志导致主机磁盘空间满了的情况
- 父组件向子组件传递数据
- 华为一季度每天入账20亿,首次披露云业务用户超100万
- pencil平替笔哪个好用?好用的pencil平替笔推荐
- Thinkpad E430 移除网卡白名单
- ttkefu怎么取消英文版?显示中文版
- 树莓派Linux-raspberrypi域名解析失败:Temporary failure in name resolution
- javafx 制作 24点游戏 24点计算器 24点算法
- 【Golang】gin上传文件并且返回文件地址
- Java常用设计模式(三)
- 【TCP/IP详解】ARP报文格式 | RARP报文格式
- mysql的substr函数常用语法
- 百度云主机只能访问首页,bcloud_nginx_user.conf配置