06-CSS背景属性

背景颜色

  • 如何设置标签的背景颜色?
    • 在CSS中有一个background-color:属性, 就是专门用来设置标签的背景颜色的
    • 背景颜色属性取值
      • 具体颜色单词
      • rgb
      • rgba
      • 使用十六进制表示颜色
    • 背景颜色快捷键
      • bc background-color: #fff;
<style>
        .box1{
            width: 30px;
            height: 30px;
            background-color: red;
        }
        
        .box2{
            width: 30px;
            height: 30px;
            background-color: #00ffff;
        }

        .box3{
            width: 30px;
            height: 30px;
            background-color: rgb(0,255,255);
        }

        .box4{
            width: 30px;
            height: 30px;
            background-color: rgba(30,233,233,0.5);
        }
</style>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>

背景图片

  • 如何设置背景图片?
    • 在CSS中有一个叫做background-image: url();的属性, 就是专门用于设
      置背景图片的
    • 快捷键: bi--> background-image: url();
  • 注意点:
    • 1.图片的地址必须放在url()中, 图片的地址可以是本地的地址, 也可以是网络的地址
    • 2.如果图片的大小没有标签的大小大, 那么会自动在水平和垂直方向平铺来填充
    • 3.如果网页上出现了图片, 那么浏览器会再次发送请求获取图片
<style>
        div{
            width: 1000px;
            height: 1000px;
            background-image: url(image/picture.jpg);
            /*background-image: url(http://img4.imgtn.bdimg.com/it/u=2278032206,4196312526&fm=21&gp=0.jpg);*/
        }
    </style>
<div></div>
  • 多重背景图片
    • 在CSS3中支持添加多个背景图片,多张背景图片之间用逗号隔开即可
    • 注意点:
      • 先添加的背景图片会盖住后添加的背景图片
      • 建议在编写多重背景时将背景属性拆开编写
        background-image
        background-repeat
        background-position

背景平铺

  • 如何控制背景图片的平铺方式?
    • 在CSS中有一个background-repeat属性, 就是专门用于控制背景图片的平铺方式的
    • 平铺属性取值
      • background-repeat: repeat; 默认, 在水平和垂直都需要平铺
      • background-repeat: no-repeat; 在水平和垂直都不需要平铺
      • background-repeat: repeat-x; 只在水平方向平铺
      • background-repeat: repeat-y; 只在垂直方向平铺
      快捷键
bgr background-repeat:
  • 应用场景:
    • 可以通过背景图片的平铺来降低图片的大小, 提升网页的访问速度
<style>
        div{
            height: 1000px;
            background-image: url(image/1.png);
            /*background-repeat: no-repeat;*/
            /*background-repeat: repeat-x;*/
            background-repeat: repeat-y;
        }
</style>
<div></div>

背景定位

  • 如何控制背景图片的位置?
    • 在CSS中有一个叫做background-position:属性, 就是专门用于控制背景图片的位置
  • 定位属性格式
    • background-position: 水平方向 垂直方向;
  • 属性取值
    • 具体的方位名词
      • 水平方向: left center right
      • 垂直方向: top center bottom
    • 具体的像素
      • 例如: background-position: 100px 200px;
      • 记住一定要写单位, 也就是一定要写px,记住具体的像素是可以接收负数的 
    快捷键:
bp background-position: 0 0;
  • 注意点:
    • 同一个标签可以同时设置背景颜色和背景图片, 如果颜色和图片同时存在, 那么图片会覆盖颜色 
<style>
        .box1{
            height: 500px;
            background-image: url(image/yxlm.jpg);
            background-position: center 500px;
            /*background-position: left top;*/
            /*background-position: center center;*/
            /*background-position: 100px 200px;*/

        }
</style>
<div class="box1"></div>

背景绘制区域

  • 背景绘制区域属性是专门用于指定从哪个区域开始绘制背景的, 默认情况下会从border区域开始绘制背景
  • 我们也可以通过background-clip属性来指定绘制区域从哪里开始
    • background-clip: padding-box;从内边距开始绘制背景
    • background-clip: content-box; 从文本内容区域开始绘制背景
    • background-clip: border-box; 默认从边框区域开始绘制背景
<style>
        *{
            margin: 0;
            padding: 0;
        }
        ul li{
            list-style: none;
            float: left;
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            border: 20px dashed #000;
            padding: 50px;
            margin-left: 20px;
            background-color: red;
        }

        /*默认是从border绘制*/
        ul li:nth-child(2){
            background-clip: padding-box;
        }

        ul li:nth-child(3){
            background-clip: content-box;
        }

        ul li:nth-child(4){
            background-clip: border-box;
        }
</style>
<ul>
    <li>默认</li>
    <li>padding</li>
    <li>border</li>
    <li>content</li>
</ul>

背景图片定位区域属性

  • 告诉系统背景图片从什么区域开始显示,默认情况下就是从padding区域开始显示
  • 我们也可以通过background-origin:属性来指定背景图片从哪里开始显示
    • background-origin: padding-box;从内边距区域显示
    • background-origin: border-box; 从边框距区域显示
    • background-origin: content-box;从文本内容区域显示
<style>
        *{
            margin: 0;
            padding: 0;
        }
        ul li{
            list-style: none;
            float: left;
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            border: 20px dashed #000;
            padding: 50px;
            margin-left: 20px;
            background: url("image/dog.jpg") no-repeat;
        }

        ul li:nth-child(2){
            /*
            告诉系统背景图片从什么区域开始显示,
            默认情况下就是从padding区域开始显示
            */
            background-origin: padding-box;
        }

        ul li:nth-child(3){
            background-origin: border-box;
        }

        ul li:nth-child(4){
            background-origin: content-box;
        }
</style>
<ul>
    <li>默认</li>
    <li>padding</li>
    <li>border</li>
    <li>content</li>
</ul>

背景尺寸

  • 什么是背景尺寸属性?
    • 背景尺寸属性是CSS3中新增的一个属性, 专门用于设置背景图片大小
  • 背景尺寸属性格式
    • background-size: 100px 100px;
    • 第一个参数代表宽度,第二个参数代表高度
  • 属性取值
    • 具体像素值: background-size: 100px 100px;
    • 百分比值: background-size: 100% 50%;
    • 宽度或者高度等比拉伸: background-size: 100% auto;
    • cover: background-size: cover;
      • cover含义:
        1.告诉系统图片需要等比拉伸
        2.告诉系统图片需要拉伸到宽度和高度都填满元素
    • contain: background-size: contain;
      • contain含义:
        1.告诉系统图片需要等比拉伸
        2.告诉系统图片需要拉伸到宽度或高度都填满元素
<style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            width: 800px;
            height: 500px;
            margin: 0 auto;
        }
        ul li{
            list-style: none;
            float: left;
            width: 200px;
            height: 200px;
            margin: 30px 30px;
            border: 1px solid #000;
            text-align: center;
            line-height: 200px;
        }
        ul li:nth-child(1){
            background: url("image/dog.jpg") no-repeat;
        }

        ul li:nth-child(2){
            background: url("image/dog.jpg") no-repeat;
            /*
            第一个参数:宽度
            第二个参数:高度
            */
            background-size: 100px 100px;
        }

        ul li:nth-child(3){
            background: url("image/dog.jpg") no-repeat;
            background-size: 100% 50%;
        }

        ul li:nth-child(4){
            background: url("image/dog.jpg") no-repeat;
            background-size: 100% auto;
        }

        ul li:nth-child(5){
            background: url("image/dog.jpg") no-repeat;
            background-size: auto 100px;
        }

        ul li:nth-child(6){
            background: url("image/dog.jpg") no-repeat;
            /*
            cover含义:
            1.告诉系统图片需要等比拉伸
            2.告诉系统图片需要拉伸到宽度和高度都填满元素
            */
            background-size: cover;
        }

        ul li:nth-child(7){
            background: url("image/dog.jpg") no-repeat;
            /*
            contain含义:
            1.告诉系统图片需要等比拉伸
            2.告诉系统图片需要拉伸到宽度或高度都填满元素
            */
            background-size: contain;
        }
</style>
<ul>
    <li>默认</li>
    <li>具体像素</li>
    <li>百分比</li>
    <li>宽度等比拉伸</li>
    <li>高度等比拉伸</li>
    <li>cover</li>
    <li>contain</li>
</ul>

背景属性连写

  • 背景属性连写的格式
    • background: 背景颜色 背景图片 平铺方式 关联方式 定位方式;
  • 快捷键:
    • bg+ background: #fff url() 0 0 no-repeat;
  • 注意点：
    • background属性中， 任何一个属性都可以被省略
  • 什么是背景关联方式？
    • 默认情况下背景图片会随着滚动条的滚动而滚动， 如果不想让背景图片随着滚动条的滚动而滚动， 那么我们就可以修改背景图片和滚动条的关联方式
  • 如何修改背景关联方式？
    • 在CSS中有一个叫做background-attachment的属性， 这个属性就是专门用于修改关联方式的
    • 关联方式取值：
      • background-attachment: scroll; 默认值， 会随着滚动条的滚动而滚动
      • background-attachment: fixed; 不会随着滚动条的滚动而滚动
      • 快捷键: ba background-attachment;

背景图片和插入图片的区别

  • 背景图片仅仅是一个装饰, 不会占用位置
    插入图片会占用位置
  • 背景图片有定位属性, 所以可以很方便的控制图片的位置
    插入图片没有定位属性, 所有控制图片的位置不太方便
  • 插入图片的语义比背景图片的语义要强, 所以在企业开发中如果你的图片
    想被搜索引擎收录, 那么推荐使用插入图片

文字背景裁剪属性

浏览器私有属性前缀
  • -moz代表firefox浏览器私有属性
  • -ms代表IE浏览器私有属性
  • -webkit代表chrome、safari私有属性
  • 如何设置背景属性绘制区域为文字区域?
    • -webkit-background-clip: text;
  • 如何设置文本填充颜色为透明色
    • -webkit-text-fill-color: transparent;
<style>
        div{
            width: 400px;
            height: 400px;
            border: 1px solid #000;
            margin: 100px auto;
            text-align: center;
            line-height: 400px;
            font-size: 150px;
            background: url("image/4.jpg") center center;
            font-weight: bold;
            /*
            添加私有前缀之后,就代表当前的私有属性只对当前浏览器有效
            -moz代表firefox浏览器私有属性
            -ms代表IE浏览器私有属性
            -webkit代表chrome、safari私有属性
            */
            /*设置背景属性为文本绘制*/
            -webkit-background-clip: text;
            /*设置文本填充颜色为透明色*/
            -webkit-text-fill-color: transparent;
        }
</style>
<div>NBA</div>

CSS精灵图

  • 什么是CSS精灵图
    • CSS精灵图是一种图像合成技术
  • CSS精灵图作用
    • 可以减少请求的次数, 以及可以降低服务器处理压力
  • 如何使用CSS精灵图
    • CSS的精灵图需要配合背景图片和背景定位来使用
精灵图
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • 前端之路——笔记（基础css）
    学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握CSS三种显示...
    七彩小鹿阅读 6,362评论 2赞 66
  • h5常见的面试题
    第一部分 HTML&CSS整理答案 1. 什么是HTML5？ 答：HTML5是最新的HTML标准。 注意：讲述HT...
    kismetajun阅读 27,887评论 1赞 45
  • CSS相关总结
    一、CSS入门 1、css选择器 选择器的作用是“用于确定（选定）要进行样式设定的标签（元素）”。 有若干种形式的...
    宠辱不惊丶岁月静好阅读 1,653评论 0赞 6
  • CSS 笔记
    CSS 指层叠样式表（Cascading Style Sheets），是一种用来为结构化文档（如 HTML 文档或...
    神齐阅读 2,148评论 0赞 14
  • 30天
    分享，要谦虚不要骄傲 今天看到ZJ给我发的几条消息，还有我的WP的考评，我瞄了一眼信息，就继续在做我的方案文件和风...
    Dolas阅读 109评论 0赞 0