首页 > Web开发 > 详细

繁星CSS3之旅-CSS基本样式-CSS背景

时间:2017-03-07 08:24:00      阅读:304      评论:0      收藏:0      [点我收藏+]

CSS背景

1、背景

CSS允许应用纯色作为背景,也允许使用背景图像创建相当复杂的效果

技术分享

(1)设置背景颜色

例:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <p>测试背景是否可以继承</p>
</html>
body{
    background-color: darkgray;
}
p{
    width:150px;/*增宽*/
    padding: 10px;/*内边距10px*/
    background-color: red;
}

效果图

技术分享

(2)、设置背景图片

body{
    background-image: url("bg.jpg");/*图片名称*/
}

效果图

技术分享

body{
    background-image: url("bg.jpg");/*图片名称*/
    background-repeat: repeat-x;/*重复X轴&重复y轴:repeat-y*/
}

技术分享

body{
    background-image: url("bg.jpg");/*图片名称*/
    background-repeat: no-repeat;/*重复X轴&重复y轴:repeat-y*/
    background-position: center top;/*从中间顶部开始显示*/
}

技术分享

background-attachment效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</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>
    <p>测试背景是否可以继承</p>
</html>
body{
    background-image: url("bg.jpg");/*图片名称*/
    background-repeat: no-repeat;/*重复X轴&重复y轴:repeat-y*/
    background-position: left top;/*从中间顶部开始显示*/
    background-attachment: fixed;
}

技术分享

2、CSS3背景

技术分享

 

繁星CSS3之旅-CSS基本样式-CSS背景

原文:http://www.cnblogs.com/multistars/p/6512676.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!