当前位置：主页 > 查看内容

【31】CSS核心样式（8）——背景属性（下）

发布时间：2021-05-11 00:00| 有 位朋友查看

简介：★文章内容学习来源拉勾教育大前端就业集训营 目录 上篇 本篇 一、背景颜色 background-color 五、背景附着 background-attachment 二、背景图片 background-image 六、综合写法 三、背景重复 background-repeat 七、背景应用 四、背景定位 background-posit……

★文章内容学习来源：拉勾教育大前端就业集训营

目录上篇本篇
一、背景颜色 background-color五、背景附着 background-attachment
二、背景图片 background-image六、综合写法
三、背景重复 background-repeat七、背景应用
四、背景定位 background-position八、CSS3 新增背景属性

在这里插入图片描述

五、背景附着 background-attachment

背景附着属性具体含义
属性名background-attachment
作用设置的是背景图片是否要随着页面或者盒子的滚动而滚动
属性值scroll 滚动的，表示背景图片与盒子保持相对位置不变，随着页面的滚动而滚走
fixed 固定的，背景图的定位的参考点从盒子 border 以内的左上顶点变为了浏览器窗口的左上顶点，页面滚动时，浏览器窗口的左上顶点是不变的，导致背景图固定在浏览器窗口的某个位置，不会随着页面滚动而滚走。
background-attachment: scroll;
background-attachment: fixed;

六、综合写法 background

综合写法具体含义
属性名background background
属性可以将五个单一属性的值进行合写
属性值可以有 1-5 个属性值，值之间用空格进行分隔，背景定位的两个属性值算作一个属性值，不能被分开也不能颠倒顺序。五个属性值之间可以互换位置。
注意事项①如果属性值没有设置完全，其他没有设置的单一属性会按照默认值加载
②如果想去层叠综合属性中的一部分，其他的属性保持不变，最好使用单一属性写法进行层叠
 background: url(samoye.jpg) no-repeat left top fixed pink;
 background-color: blue;/*其他的属性保持不变，最好使用单一属性写法进行层叠*/
完整效果及代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>六、综合写法</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .box {
      width: 500px;
      height: 500px;
      padding: 30px;
      border: 10px dashed #f00;
      margin: 50px;
      background: url(samoye.jpg) no-repeat left top fixed pink;
      background-color: blue;/*其他的属性保持不变，最好使用单一属性写法进行层叠*/
     }
  </style>
</head>
<body>
  <div class="box">111</div>
</body>
</html>

在这里插入图片描述

七、背景应用

几个比较常见的场景：
场景一： 背景图替换插入图

替换插入图<h1>标签是权重最高的标签，一般会在内部书写最重要的内容，比如 logo 图片、最大 的标题等。 另外 <h1> 内部的文字，可以帮助提高 SEO 搜索排名。 但是在设置的是 logo 图片时，如果使用插入图，就不能书写搜索关键字。 如下示例：

<h1>
    <a href="#"><img src="taobaocom.jpg"></a>
  </h1>

所以如果想解决 SEO 问题，可以将 HTML 结构中，插入图换成搜索关键字，然后使用 css添加背景图给 <a>标签或<h1>标签。如下示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title> 场景一： 背景图替换插入图</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .header h1 a {
      display: block;
      width: 148px;
      height: 58px;
      background: url(taobaocom.jpg) no-repeat;  /*插入背景图*/
    }
  </style>
</head>
<body>
  <div class="header">
  <h1>
    <a href="#">淘宝网|购物|六一</a>
  </h1>
</div>
</body>
</html>

在这里插入图片描述

补充：文字隐藏方法
①将字号设置为 0。IE8 及以上或高版本浏览器可以隐藏文字，但是 IE7 及以下有兼容问题。
②可以设置给 <a>标签一个text-indent属性，属性值为负的很大的值，文字会走到盒子外部，直接再设置溢出隐藏属性 overflow: hidden;，将溢出文字隐藏。

.header h1 a {
   font-size: 0;
 }

.header h1 a {
      text-indent: -30em;
      overflow: hidden;
  }

在这里插入图片描述

场景二：padding区域背景图

制作方法：在一个盒子中有背景图部分，而且有文字内容，文字会让开背景图区域进行加载， 背景区域应该使用 padding 挤出位置。 四个方向的 padding 都可能用于添加背景图。 例如 padding-left 区域背景：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>场景二：padding区域背景图</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .list {
      width: 300px;
      padding-left: 10px;
      border: 1px solid #333;
      margin: 10px;
      list-style: none;
      font: 16px/32px "微软雅黑";
    }
    .list li {
      padding-left: 20px;
      background: url(star.png) no-repeat left center;
      background-size: 10px 10px;
    }
  </style>
</head>
<body>
  <ul class="list">
    <li>新闻标题新闻标题新闻标题</li>
    <li>新闻标题新闻标题新闻</li>
    <li>新闻标题新闻标题新闻标</li>
    <li>新闻标题新闻标题</li>
    <li>新闻标题新闻标题新闻标题</li>
  </ul>
</body>
</html>

在这里插入图片描述

场景三：精灵图技术

当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次 请求才能展现给用户。 然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时， 服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。 为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度，出现了 CSS 精灵技术（也称 CSS Sprites、 CSS 雪碧）。

CSS 精灵是一种处理网页背景图像的方式。
它将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。 通常情况下，这个由很多小的背景图像合成的大图被称为精灵图。

css 精灵的技术依据
①将网页中需要用到的小尺寸背景图制作成一张背景透明的 png 图片。
②利用背景定位技术，将精灵图的每个小图片加载到对应的标签上。

制作精灵图的注意事项

  1. 精灵图上放的都是小的装饰性质的背景图片，插入图片不能往上放。
  2. 精灵图的宽度取决于最宽的那个背景图片的标签宽度。
  3. 精灵图可以横向摆放也可以纵向摆放，但是每个图片之间必须留够足够的空白， 保证背景图片加载到一个标签内部时，不能出现多余内容。
  4. 在精灵图的最底端，尽量留一点空白，方便以后添加其他精灵图。

可以使用一些在线工具，快速生成精灵图。
在这里插入图片描述

八、CSS3 新增背景属性

1.背景半透明

  • CSS3 支持背景半透明的写法，颜色值增加了一种 rgba模式。
  • rgba 模式：在 rgb 基础上增加了一个不透明度的设置，不透明度 alpha 取值范围在 0-1 之间，0 表示完全透明，1 表示完全不透明，0.5 表示半透明。
  • 书写方式：rgba(红色，绿色，蓝色，不透明度)
  • 注意： 背景半透明是指盒子背景半透明， 盒子里面的内容不受影响。
  • 半透明其他应用同样， 可以给文字和边框透明，都是 rgba 的格式来写。
      background-color: rgba(0, 0, 255, 0.5) /*半透明色背景*/

在这里插入图片描述

      color:rgba(0, 255, 255, 0.5)/*半透明色文字*/

在这里插入图片描述

      border: 1px solid rgba(255,0,0,0.5);/*半透明色边框*/

在这里插入图片描述

2.背景缩放 background-size

  • 通过 background-size 设置背景图片的尺寸，就像我们设置 <img>的尺寸一样，在 移动 Web 开发中做屏幕适配应用非常广泛。
背景缩放属性具体含义
属性值
① px 值 （1-2个像素值）只设置1个值，垂直方向等比例拉伸；
设置2个值，按照设置值加载。
②百分比同像素值设置方法相同，设置百分比时，数值参照盒子的宽、高属性
③cover自动调整缩放比例，把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。如有溢出部分则会被隐藏。
④contain自动调整缩放比例，把图像图像扩展至最大尺寸，保证图片始终完整显示在背景区域。

3.多背景

  • CSS3 中规定，一个盒子上，可以添加多个背景图片。
  • background-image 的属性值书写时，以逗号分隔多背景的 URL路径地址。
  • 注意：背景加载时，先写的背景压盖后写的背景图片。
 background-image: url(samoye.jpg),url(heben.jpg);

下篇继续：【32】CSS核心样式（9）——定位属性（上）

；原文链接：https://blog.csdn.net/weixin_47640160/article/details/115408746
本站部分内容转载于网络，版权归原作者所有，转载之目的在于传播更多优秀技术内容，如有侵权请联系QQ/微信：153890879删除，谢谢！
上一篇：Javascript基础、对象、内置对象 下一篇：没有了

推荐图文

  • 周排行
  • 月排行
  • 总排行

随机推荐