如何使用background属性

本篇文章为大家展示了如何使用background属性，代码简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

成都创新互联公司于2013年创立，是专业互联网技术服务公司，拥有项目网站建设、成都网站制作网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元柘荣做网站,已为上家服务,为柘荣各地企业和个人服务,联系电话:13518219792

background属性是CSS的一个简写属性，可以在一个声明中设置所有的背景属性：背景颜色，背景图像、图像的位置、大小、定位区域、绘画区域，如何重复背景图像、背景图像是否固定或者随着页面的其余部分滚动。

CSS background属性

作用：background 简写属性在一个声明中设置所有的背景属性。

基本语法：

background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment;

参数：

background-color：指定要使用的背景颜色。

background-image：指定要使用的一个或多个背景图像。

background-position：定背景图像的位置。

background-size：指定背景图片的大小。

background-repeat ：指定如何重复背景图像。

background-origin ：指定背景图像的定位区域。

background-clip 指定背景图像的绘画区域。

background-attachment：设置背景图像是否固定或者随着页面的其余部分滚动。

注：IE8 以及更早的浏览器不支持一个元素多个背景图像。

说明：如果上述的值缺少一个也没关系，例如：可以只设置背景图片，background：url('smiley.gif') no-repeat;

CSS background属性的使用示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>创新互联(php.cn)</title> 
<meta charset="utf-8"> 
<style>
body
{ 
background: #00ff00 url('/upload/otherpic63/5c6a208c1ad5b114.gif') no-repeat fixed center; 
}
</style>
</head>
<body>
<p>这是一些测试文本。</p>
<p>这是一些测试文本。</p>
<p>这是一些测试文本。</p>
<p>这是一些测试文本。</p>
<p>这是一些测试文本。</p>
<p>这是一些测试文本。</p>
<p>这是一些测试文本。</p>
<p>这是一些测试文本。</p>
<p>这是一些测试文本。</p>
<p>这是一些测试文本。</p>
<p>这是一些测试文本。</p>
<p>这是一些测试文本。</p>
<p>这是一些测试文本。</p>
<p>这是一些测试文本。</p>
<p>这是一些测试文本。</p>
<p>这是一些测试文本。</p>
<p>这是一些测试文本。</p>
<p>这是一些测试文本。</p>
<p>这是一些测试文本。</p>
<p>这是一些测试文本。</p>
<p>这是一些测试文本。</p>
<p>这是一些测试文本。</p>
<p>这是一些测试文本。</p>
<p>这是一些测试文本。</p>
</body>
</html>

效果图：

如何使用background属性

上述内容就是如何使用background属性，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注创新互联行业资讯频道。

分享题目：如何使用background属性
分享URL：https://www.cdcxhl.com/article28/jipocp.html

成都网站建设公司_创新互联，为您提供手机网站建设、企业网站制作、网站导航、动态网站、网站营销、关键词优化

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容