CSS之实例篇——背景

最新推荐文章于 2021-12-15 01:25:33 发布

对不起该昵称已存在

最新推荐文章于 2021-12-15 01:25:33 发布

阅读量137

点赞数

分类专栏：自学

自学专栏收录该内容

12 篇文章 0 订阅

订阅专栏

CSS背景
1、设置页面背景：

//HTML文件
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link href="main1.css" rel="stylesheet">
    </head>
    <body>
        <h1>我的CSS web页！</h1>
        <p>您好世界！这是来自runoob菜鸟教程的实例。</p>
    </body>

body{
    background-color:rgba(93, 93, 148, 0.514);
}

2、设置不同元素的背景颜色
这个例子中使用了CSS伪类，之所以成为伪类是因为其不依靠文本流。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link href="main1.css" rel="stylesheet">
    </head>
    <body>
        <h1>CSS bakground-color实例</h1>
        <div>
            <p>该文本插入在div元素中。</p>
            <p>该段落有自己的背景颜色。</p>
            <p>我们仍然在同一个div中。</p>
        </div>
    </body>

h1{
    background-color:rgb(86, 86, 167);
}
p:nth-child(2)/*找到作为某元素的第二个孩子的p元素*/
{
    background-color:beige;
}
div{
    background-color:rgb(163, 163, 230);
}

另一种方法，利用div的block性质：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link href="main1.css" rel="stylesheet">
    </head>
    <body>
        <h1>CSS bakground-color实例</h1>
        <div>
            该文本插入在div元素中。
            <p>该段落有自己的背景颜色。</p>
            我们仍然在同一个div中。
        </div>
    </body>

h1{
    background-color:rgb(86, 86, 167);
}
p
{
    background-color:beige;
}
div{
    background-color:rgb(163, 163, 230);
}

3、设置一个图像作为页面的背景
background-attachment：fixed//使得图片不会随页面的滚动而变化。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link href="main1.css" rel="stylesheet">
    </head>
    <body>
        <h1>CSS bakground-color实例</h1>
    </body>

body{
    background-color:beige;
    background-image:url("demo1.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: left-top;
}
//一般的background属性的顺序就是这样的。
//图片的重复方向：repeat-x或者repeat-y

4、如何定位背景图片
可以用bakground-size设置图片的大小
并且可以使用background-position和margin的配合使用达到文字和图片的分开，互不影响。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link href="main1.css" rel="stylesheet">
    </head>
    <body>
        <h1>hello world!</h1>
        <p>背景图片不重复，设置position实例。</p>
        <p>背景图片只显示一次，并与文本分开。</p>
        <p>实例中还添加了margin-right属性用于让文本图片间隔开。</p>
    </body>

body{
    background-color:beige;
    background-image:url("同.jpeg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: right top;
    margin-right:1000px;
    background-size:1000px 100%;//设置背景图片大小
}

5、高级背景的例子：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link href="main1.css" rel="stylesheet">
    </head>
    <body>
        <h1>hello Dong!</h1>
       <div>May you have good time with Can.And don not forget
           that study is the most important thing for you!!!
       </div>
    </body>

body{
    background-color:rgb(2, 25, 44);
    background-image:url("demo1.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: right top;
    background-size:100% 100%;
}
 div{
    background-color:rgb(153, 195, 212);
    width:300px;
    height:350px;
    padding:2px;
    border:1px solid pink;
    border-radius: 6px;
    margin:5px 2px 0px 1020px;
    text-align:left;
    font-size:20px;
    font-style:italic;
    line-height:30px;
}
div:first-letter{
    font-size:35px;
    float: left;
}

CSS背景的设计相关属性：
菜鸟教程

对不起该昵称已存在

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS之实例篇——背景

CSS背景1、设置页面背景：//HTML文件<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <link href="main1.css" rel="stylesheet"...
复制链接

扫一扫