CSS背景

落日映苍穹つ 2021-12-10 23:51 557阅读 0赞

1.设置页面的背景颜色

  1. body{
  3.         margin:0px;
  4.         background-color:lightskyblue;
  5.     }
  7. <!DOCTYPE html>
  8. <html lang="en">
  9. <head>
  10.     <meta charset="UTF-8">
  11.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  12.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  13.     <title>我的CSS</title>
  14. </head>
  15. <body>
  16. <h1>我的CSS web页！</h1>
  17. <p>Hello World！</p>
  18. </body>
  19. </html>

2.设置不同元素的背景颜色

  1. 1 h1{
  2. 2         background-color:royalblue;
  3. 3     }
  4. 4     div{
  5. 5         background-color:silver;
  6. 6     }
  7. 7     p{
  8. 8         background-color:honeydew;
  9. 9     }
  11. <!DOCTYPE html>
  12. <html lang="en">
  13. <head>
  14.     <meta charset="UTF-8">
  15.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  16.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  17.     <title>我的CSS</title>
  19. </head>
  20. <body>
  21. <h1>CSS background-color实例！</h1>
  22. <div>
  23. 该本文插入在div元素中。
  24. <p class="green">该段落有自己的背景颜色。</p>
  25. 我们任然在同一个div中。
  26. </div>
  27. </body>
  28. </html>

3.设置一个图像最为页面的背景

  1. div {
  3.    margin: 0px;
  4.    width: 200px;
  5.    height: 200px;
  6.    background-image: url('fun.jpg');
  7. }
  8. div h1 {
  10.     text-align: center;
  11. }
  13. <!DOCTYPE html>
  14. <html lang="en">
  15. <head>
  16.     <meta charset="UTF-8">
  17.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  18.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  19.     <title>我的CSS</title>
  20. </head>
  21. <body>
  22. <div>
  23.     <h1>Hello World!</h1>
  24. </div>
  25. </body>
  26. </html>

4.如何在水平方向重复背景图像

  1. div {
  3.     background-image: url('fun.jpg');
  4.     background-repeat: no-repeat;
  5. }
  7. <body>
  8. <div>
  9.     <h1>Hello World!</h1>
  10. </div>
  11. </body>

5.如何定位背景图像

  1. div {
  3.     background-image: url('fun.jpg');
  4.     background-repeat: no-repeat;
  5.     margin-right: 200px;
  6. }
  8. <body>
  9. <div>
  10.     <h1>Hello World!</h1>
  11. </div>
  12. </body>

6.一个固定的背景图片（这个图片不会随着页面的其余部分滚动）

  1. div {
  3.     background-image: url("fun.jpg");
  4.     background-repeat: no-repeat;
  5.     background-attachment: fixed;
  6.     right: 2000px;
  7. }
  9. <body>
  10. <div>
  11.     <p>背景图片是固定的。尝试向下滚动页面</p>
  12.     <p>背景图片是固定的。尝试向下滚动页面</p>
  13.     <p>背景图片是固定的。尝试向下滚动页面</p>
  14.     <p>背景图片是固定的。尝试向下滚动页面</p>
  15.     <p>背景图片是固定的。尝试向下滚动页面</p>
  16.     <p>背景图片是固定的。尝试向下滚动页面</p>
  17.     <p>背景图片是固定的。尝试向下滚动页面</p>
  18.     <p>背景图片是固定的。尝试向下滚动页面</p>
  19.     <p>背景图片是固定的。尝试向下滚动页面</p>
  20.     <p>背景图片是固定的。尝试向下滚动页面</p>
  21. </div>
  22. </body>

7.声明背景属性

  1. body{
  3.         background: url("fun.jpg") no-repeat right top;
  4.         margin-right: 200px;
  5. }
  7. <body>
  8.     <h1>Hello World!</h1>
  9.     <p>背景图片只显示一次但它位置离文本比较远</p>
  10.     <p>在这个例子中我们添加了一个右边距，所以背景图像</p>
  11. </body>

8.高级的背景例子

  1. <body>
  2.     <div class="contains">
  3.         <div class="content">
  4.             <h1>Hello World!</h1>
  5.             <p>This example contains some advanced CSS methods you may not have learned yet. But, we will explain these methods in a later chapter in the tutorial.</p>
  6.         </div>
  7.     </div>
  8. </body>
  10. body {
  12.     margin-left: 200px;
  13.     background-image: url("fun.jpg");
  14. }
  15. div.contains {
  17.     text-align: center;
  18. }
  19. div.contains div.content {
  21.     border: 1px solide skyblue;
  22.     margin-right: auto;
  23.     margin-top: auto;
  24.     width: 75%;
  25.     text-align: left;
  26.     background-color: darkorange;
  27.     padding: 8px;
  28. }

转载于:https://www.cnblogs.com/Tony98/p/10958001.html

发表评论

表情：
评论列表 （有 0 条评论，557人围观）

还没有评论，来说两句吧...

相关阅读

    相关 css设置背景

    css2设置背景相关属性有如下： background : 简写属性，作用是将背景属性设置在一个声明中。 background-color : 设置元素的背景颜色。

    小咪咪小咪咪/ 0 赞/ 460 阅读