web前台入门到实战:css常用样式背景background如何使用

作者 : 开心源码 本文共1914个字,预计阅读时间需要5分钟 发布时间: 2022-05-13 共178人阅读

css背景background属性常用于定义HTML的背景,background简写属性作用是将背景属性设置在一个公告中,background背景属性常见为以下这些:.background-color代表背景颜色 .background-image代表背景图像 .background-repeat 代表背景图像水平或者者垂直平铺 .background-attachment代表背景图像能否固定或者者随着页面的其他部分滚动 .background-position代表设置背景图像的起始位置 在这些背景效果中background-color属性定义了元素的背景颜色,颜色值通常以以下方式定义:十六进制 – 如:”#ff0000″ RGB – 如:”rgb(255,0,0)”颜色名称 – 如:”red” 具体用下面的代码展现说明下:

专门建立的学习Q-q-u-n: 784783012 ,分享学习的方法和需要注意的小细节,不停升级最新的教程和学习技巧(从零基础开始到前台项目实战教程,学习工具,全栈开发学习路线以及规划)<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>CSS背景background</title>    <style type="text/css">    /*background-color:定义元素背景色*/ div{        /*颜色值通常以以下方式定义:十六进制 - 如:"#ff0000" RGB - 如:"rgb(255,0,0)"颜色名称 - 如:"red"*/ color: #f90; color: rgb(red, green, blue); color: royalblue; color: rgb(255,255,255); background-color: blueviolet;    }    /*background-image:定义元素背景图像*/ body{ background-image:url("https://pic.cnblogs.com/avatar/1350951/20200208114706.png");    }    /*background-repeat:代表背景图像水平或者者垂直平铺*/ body{ background-image:url("https://pic.cnblogs.com/avatar/1350951/20200208114706.png"); background-repeat: repeat-x;/*图像水平平铺*/ background-repeat: repeat-Y;/*图像垂直平铺*/ background-repeat: no-repeat;/*图像拒绝平铺*/    }    /*background-position代表设置背景图像的起始位置*/    /* 提醒:为 background-position 属性提供值有很多方法。首先,可以使用少量关键字:top、bottom、left、right 和 center;其次,可以使用长度值,如 100px 或者 5cm;最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。 */ body{ background-image:url("https://pic.cnblogs.com/avatar/1350951/20200208114706.png"); background-position:left top;    }    /* background-attachment代表背景图像能否固定或者者随着页面的其他部分滚动 */ body{ background-image:url("https://pic.cnblogs.com/avatar/1350951/20200208114706.png"); background-repeat: no-repeat; background-position:800px 1000px;/*图像将在元素内边距向右移动800px,向下移动1000px*/ background-attachment: fixed;    }    /* background背景简写 */    /* div{        background: color image repeat attachment position;    } */    </style></head><body>    <div>如何在页面滚动齿轮的时候实现背景图不动,选择 background-attachmn:fixed</div>    <!-- 100个换行符 br*100敲下enter键 --></body></html>
说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » web前台入门到实战:css常用样式背景background如何使用

发表回复