21.3 CSS 背景属性

这篇具有很好参考价值的文章主要介绍了21.3 CSS 背景属性。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

21.3 CSS 背景属性,Python 从入门到全栈开发,css,前端

1. 背景颜色

background-color属性: 设置元素的背景颜色.
它可以接受各种颜色值, 包括命名颜色, 十六进制颜色码, RGB值, HSL值等.

快捷键: bc+tab background-color:#fff;

21.3 CSS 背景属性,Python 从入门到全栈开发,css,前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>background color</title>
  <style>
    div {
      height: 100px;
    }
    .box1 {
      background: red;
    }

    .box2 {
      background: rgb(100, 100, 100);
    }

    .box3 {
      background: rgba(100, 100, 100, d0.5);
    }
    .box4 {
      background: #AAAAAA;
    }
    .box5 {
      background: #666;
    }
  </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
</body>
</html>

21.3 CSS 背景属性,Python 从入门到全栈开发,css,前端

21.3 CSS 背景属性,Python 从入门到全栈开发,css,前端

2. 背景图片

background-image属性: 设置元素的背景图片.
可以使用该属性指定一个图片文件的URL作为元素的背景.

注意事项: 如果图片的大小, 没有标签大, 那么会自动在水平和垂直方向平铺和填充.

快捷键: bi+tab background-image:url("");
背景图片: 仅仅是一个装饰, 不会占用位置, 有定位属性可以控制图片位置.
插入图片: 会占用位置, 没有定位属性, 控制图片位置难, 搜索引擎能收录.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>background image</title>
    <style>
        div {
            height: 1000px;
            width: 1000px;
            background-image: url(image/img1.gif);
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

21.3 CSS 背景属性,Python 从入门到全栈开发,css,前端

3. 背景图像重复方式

background-repeat属性: 用来控制背景图像的重复方式.
它可以设置在CSS中的背景属性(background或background-image).

常用属性值:
- repeat: 默认值, 背景图像在水平和垂直方向上重复.
- repeat-x: 背景图像在水平方向上重复.
- repeat-y: 背景图像在垂直方向上重复.
- no-repeat: 背景图像不重复, 只出现一次.
- round: 背景图像在水平和垂直方向上拉伸或缩小, 直到填满整个容器.
- space: 背景图像在水平和垂直方向上复制以填满容器, 但图像之间的间隔保持相等.

快捷键: bgr+tab background-repeat:;
应用场景: 为网页设置背景图片, 图片越大, 需要加载的时间越长, 通过平铺来降低图片的大小, 提示网页的访问速度(使用有规律的图片).

找一张有规律, x, y轴平铺.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>background repeat</title>
    <style>
        div {
            height: 1080px;
            width: 1920px;
        }

        .box1 {
            background-image: url(image/img2.png);
        }
    </style>
</head>
<body>
<div class="box1"></div>
</body>
</html>

21.3 CSS 背景属性,Python 从入门到全栈开发,css,前端

4. 背景图片定位

background-position属性: 用于设置背景图像在容器内的位置.

该属性可以采用以下方式进行设置:
* 1. 使用关键字或关键字组合:
     - left: 将背景图像向容器的左侧对齐.
     - center: 将背景图像在容器中水平和垂直居中.
     - right: 将背景图像向容器的右侧对齐.
     - top: 将背景图像向容器的顶部对齐.
     - bottom: 将背景图像向容器的底部对齐.
     - 关键字组合: 可以使用关键字组合(左或右, 上或下), 'left top', 'right bottom', 将背景图像分别在水平和垂直方向上对齐.

* 2. 使用像素, 百分比或其他单位的值:
     - px: 使用像素值来指定背景图像相对于容器边框的偏移位置.
     - %: 使用百分比值来指定背景图像相对于容器宽度或高度的偏移位置.
     - 其他单位: 可以使用其他有效的长度单位如: em, rem, vw, vh等.

注意事项: 同一个标签可以同时设置背景颜色和背景图片, 如果颜色和图片同时存在, 图片会覆盖背景颜色.

快捷键: bp+tab background-position:0 0;

4.1 关键字定位

21.3 CSS 背景属性,Python 从入门到全栈开发,css,前端

21.3 CSS 背景属性,Python 从入门到全栈开发,css,前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>background position 1</title>
    <style>
        div {
            height: 300px;
            width: 300px;
            background: #00ff19;
        }

        .box1 {
            background-image: url(image/柯南.jpg);
            background-repeat: no-repeat;
            background-position: top left; /* 垂直方向 上  水平方向 左 */


        }

        .box2 {
            background-image: url(image/小兰.jpg);
            background-repeat: no-repeat;
            background-position: bottom right; /* 垂直方向 下   水平方向 右 */

        }

    </style>
</head>
<body>
<div class="box1"></div>
<hr>
<div class="box2"></div>
</body>
</html>

21.3 CSS 背景属性,Python 从入门到全栈开发,css,前端

4.2 像素定位

21.3 CSS 背景属性,Python 从入门到全栈开发,css,前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>background position 2</title>
    <style>
        div {
            height: 300px;
            width: 300px;
            background: red;
        }

        .box1 {
            background-image: url(image/柯南.jpg);
            background-repeat: no-repeat;
            background-position: 100px 0;

        }

        .box2 {
            background-image: url(image/小兰.jpg);
            background-repeat: no-repeat;
            background-position: -50px -50px;
        }
    </style>
</head>
<body>
<div class="box1"></div>
<hr>
<div class="box2"></div>
</body>
</html>

21.3 CSS 背景属性,Python 从入门到全栈开发,css,前端

4.3 练习

4.3.1 图片居中

21.3 CSS 背景属性,Python 从入门到全栈开发,css,前端

假设图片大小为 96x96 像素, div大小为300x300像素.
要使图片在div中水平和垂直居中, 可以按照以下方式计算背景图像的background-position属性值.

水平偏移量 = (div 宽度 - 图片宽度) / 2 = (300 - 96) / 2 = 102 像素
垂直偏移量 = (div 高度 - 图片高度) / 2 = (300 - 96) / 2 = 102 像素

* 默认设置图标的左上角坐标.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>background position 3</title>
    <style>
        .box1 {
            width: 300px;
            height: 300px;
            background-color: aqua;
            background-image: url(image/柯南2.jpg);
            background-repeat: no-repeat;  /* 不平铺 */
            background-position: 102px;

        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>

21.3 CSS 背景属性,Python 从入门到全栈开发,css,前端

4.3.2 优先展示
优先展示: 网页始终将图片中间的重要信息给展示出来.
通常设置: background-position: center top;

21.3 CSS 背景属性,Python 从入门到全栈开发,css,前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>background position 4</title>
    <style>
        div {
            height: 160px;
        }

        .box {
            background-image: url(image/1024.gif);
            background-position: center top;
        }
    </style>
</head>
<body>
<div class="box"></div>
</body>
</html>

21.3 CSS 背景属性,Python 从入门到全栈开发,css,前端

4.3.3 图片拼接
将下面两张图片拼接在一起.

21.3 CSS 背景属性,Python 从入门到全栈开发,css,前端

21.3 CSS 背景属性,Python 从入门到全栈开发,css,前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>background position 5</title>
    <style>
        div {

            width: 1400px;
            height: 900px;
        }

        .box1 {
            background-image: url(image/剑圣1.png);
            background-repeat: no-repeat;
            background-position: 61% top;
        }

        .box2 {
            background-image: url(image/剑圣2.png);
        }

    </style>
</head>
<body>
<div class="box2">
    <div class="box1"></div>
</div>
</body>
</html>

21.3 CSS 背景属性,Python 从入门到全栈开发,css,前端

4.3.4 图片重叠
将下面两张图片重叠在一起.

21.3 CSS 背景属性,Python 从入门到全栈开发,css,前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>background position 6</title>
  <style>
    div {

      width: 1136px;
      height: 632px;
    }
    .box1 {
      background-image: url(image/鱼1.png);
        background-repeat: no-repeat;
    }
    .box2 {
      background-image: url(image/鱼2.png);
      background-repeat: no-repeat;
      background-position: center bottom;
    }

  </style>
</head>
<body>
    <div class="box1">
      <div class="box2"></div>
    </div>
</body>
</html>

21.3 CSS 背景属性,Python 从入门到全栈开发,css,前端

5. 背景图片关联

background-attachment属性: 指定背景图像的滚动行为(背景图片与滚动条之间的关联方式).

常用属性值:
- scroll: 背景图像会随着页面的滚动而滚动.
- fixed:  背景图像在页面滚动时固定不动, 保持在可视区域的固定位置.
- local:  背景图像会随着元素内容的滚动而滚动, 而不是整个页面的滚动.

快捷键: ba+tab background-attachment:;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>background attachment</title>
    <style>
        .box1 {
            background-image: url(image/img2.png);
            background-repeat: no-repeat;
            background-attachment: fixed;
        }
    </style>
</head>
<body>
<div class="box1">
    x <br> x <br> x <br> x <br>
    x <br> x <br> x <br> x <br>
    x <br> x <br> x <br> x <br>
    x <br> x <br> x <br> x <br>
    x <br> x <br> x <br> x <br>
    x <br> x <br> x <br> x <br>
    x <br> x <br> x <br> x <br>
    x <br> x <br> x <br> x <br>
    x <br> x <br> x <br> x <br>
    x <br> x <br> x <br> x <br>
    x <br> x <br> x <br> x <br>
    x <br> x <br> x <br> x <br>
    x <br> x <br> x <br> x <br>
    x <br> x <br> x <br> x <br>
    x <br> x <br> x <br> x <br>
</div>
</body>
</html>

21.3 CSS 背景属性,Python 从入门到全栈开发,css,前端

6. 背景属性缩写

背景属性缩写格式:
background: 背景颜色 背景图片 平铺方式 关联方式 定位方式;

注意事项: background中可以省略任何一个属性值. 

快捷键(可能失效): gb+ +tab: background: #fff url() 0 0 no-repeat;

21.3 CSS 背景属性,Python 从入门到全栈开发,css,前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>background</title>
    <style>
        div {
            width: 300px;
            height: 300px;
        }

        /*完整格式*/
        .box1 {
            background-color: aqua;
            background-image: url(image/太极.png);
            background-repeat: no-repeat;
            background-position: center;
        }

        /*缩写格式*/
        .box2 {
            background: red url(image/太极.png) no-repeat center;
        }
    </style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>

21.3 CSS 背景属性,Python 从入门到全栈开发,css,前端

7. 背景图片大小

background-size属性: 定义背景图片的大小.

常用属性值:
* 1. 具体像素值: 可以指定背景图片的宽度和高度.
     例如'background-size: 200px 300px;', 表示背景图片宽度为200像素, 高度为300像素.

* 2. 百分比值: 可以根据容器元素的大小来调整背景图片的尺寸.
     例如'background-size: 50% auto;', 表示背景图片的宽度为容器宽度的50%, 高度根据图片原始比例自动计算.

* 3. 关键词值:
   - auto: 背景图片的尺寸保持原始比例, 并根据容器大小进行自动调整.
   - cover: 等比例缩放背景图片, 以完全覆盖容器, 可能会有部分图片超出容器范围.
   - contain: 等比例缩放背景图片, 以完全适应容器, 可能会有背景区域出现空白.

   例如,' background-size: cover;': 表示将背景图片等比例缩放以完全覆盖容器, 可能会裁剪部分图片.
   'background-size: contain;': 表示将背景图片等比例缩放以完全适应容器, 可能会在容器内留有空白区域. 

   请注意, 'background-size'属性只对具有背景图片的元素起作用, 而不会影响其他元素.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>background size</title>
    <style>

        body {
            background-image: url(image/太极.png);
            /* 不缩放 */
            background-size: 300px 300px;
            /* 不平铺 */
            background-repeat: no-repeat;

        }

    </style>

</head>
<body>
</body>
</html>

21.3 CSS 背景属性,Python 从入门到全栈开发,css,前端

固定背景图片的大小, 不随页面缩放.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>background attachment</title>
    <style>
        body {
            /* 缩放页面不影响背景图片 */
            background-image: url(image/壁纸.webp);
            background-attachment: fixed;
            background-repeat: no-repeat;
            background-size: cover;
        }
    </style>
</head>
<body>

</body>
</html>

21.3 CSS 背景属性,Python 从入门到全栈开发,css,前端

8. CSS精灵图

CSS精灵图(CSS Sprite): 是一种将多个图像合并到单个图像文件中的技术.
通过使用CSS中的背景定位和尺寸控制, 可以只显示图像文件中的特定部分, 从而实现在网页中展示多个图像.
使用CSS精灵图的好处包括减少HTTP请求次数, 提高页面加载速度, 以及更好的用户体验.

CSS精灵图需要配合背景图片和背景定位来使用.
使用Adobe Fireworks CS6 工具 中的web切片工具快速找到图片的位置.

21.3 CSS 背景属性,Python 从入门到全栈开发,css,前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS Sprite</title>
    <style>
        div {
            width: 140px;
            height: 140px;
            display: inline-block; /* 设置为行内块级标签  */
            background-image: url("https://s2.loli.net/2022/02/16/yE1xHUWdnovFZYT.jpg");
        }

        .box1 {
            background-position: -1041px -1443px;
        }

        .box2 {
            background-position: -1445px -1442px
        }

        .box3 {
            background-position: -1832px -1644px;
        }

        .box4 {
            background-position: -237px -245px;
        }
    </style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>

21.3 CSS 背景属性,Python 从入门到全栈开发,css,前端文章来源地址https://www.toymoban.com/news/detail-687668.html

到了这里,关于21.3 CSS 背景属性的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【 Python 全栈开发 ⑰ 】面向对象、继承、多态、类方法与类属性

    Python 面向对象编程 是一种编程范式,它将数据和操作数据的方法组合在一起,形成一个“对象”,并且该对象可以被复用。在 Python 中,每一个对象都拥有一些属性和方法,它们是该对象的特征和行为。 面向对象编程可以帮助我们更好地组织和管理代码,使得代码更加模块

    2024年02月08日
    浏览(43)
  • Node.js | 从前端到全栈的必经之路

    🧑‍💼 个人简介:即将大三的学生,一个不甘平庸的平凡人🍬 🖥️ NodeJS专栏:Node.js从入门到精通 🖥️ 博主的前端之路:前端之行,任重道远(来自大三学长的万字自述) 🖥️ TypeScript知识总结:TypeScript从入门到精通(十万字超详细知识点总结) 👉 你的一键三连是我

    2024年02月03日
    浏览(59)
  • 猿创征文|前端到全栈,一名 IT 初学者的学习与成长之路

    2021 年 7 月 18 日我在 CSDN 发布了第一篇技术文章,距现在已有一年,这也意味着我在 CSDN 创作已经一年了。这一年创作历程对我来说,无疑是在 IT 方面技术成长与收获最大的一年,毫不夸张的说,从来没有过在一年时间内能学到这么多,能提升这么多。 其实如标题中所说,

    2023年04月08日
    浏览(37)
  • Python全栈开发(一)——环境搭建和入门

    今天是2023年的第一天,接下来的一个月里,我将持续更新关于python全栈开发的相关知识,前面一段时间都是基础语法。主要分成四大块:基础、面向对象、MYSQL数据库、Django框架。话不多说,进入到今天的主题。 markdown笔记-语法-格式笔记 # 第一章 python基础 ## 1.1 环境搭建 使

    2024年02月03日
    浏览(38)
  • Oracle21.3 active data guard(ADG)配置

    环境介绍: OS :centos8.3 oracle: 21.3 此次文档搭建的是CDB级别的ADG。Oracle从21.7版本开始支持PDB级别的ADG,不在这篇文章中测试验证,后续有时间再安排更新。 以下是主要的配置步骤: 1、主备开启归档模式 2、主备配置TNS 3、配置静态监听 4、主备开启强制日志和闪回 5、主库添加

    2024年01月23日
    浏览(40)
  • 9 CSS背景属性

    CSS 背景属性 1. background-color(背景颜色) 页面的背景颜色有四种属性值表示,分别是transparent(透明),RGB十进制颜色表示,十六进制颜色表示和颜色单词表示。 属性使用: 2. background-image(背景图片) background-image可以引入一张图片作为元素的背景图像。默认情况下,back

    2024年02月12日
    浏览(73)
  • 【前端 - CSS】第 18 课 - 背景属性

            欢迎来到博主 Apeiron 的博客,祝您旅程愉快 ! 时止则止,时行则行。动静不失其时,其道光明。 ​​​​​​​   目录 1、缘起 2、背景属性 2.1、背景图 2.2、背景图平铺方式  2.3、背景图位置  2.4、背景图缩放  2.5、背景图固定 2.6、背景复合属性 3、总结 

    2024年01月23日
    浏览(58)
  • CSS特性、背景属性和显示模式

    CSS特性:化简代码 / 定位问题,并解决问题 继承性 层叠性 优先级 继承性 继承性:子级默认继承父级的 文字控制属性 。 注意:如果标签有默认文字样式会继承失败。 例如:a 标签的颜色、标题的字体大小。 层叠性 特点: 相同的属性会覆盖: 后面的 CSS 属性覆盖前面的

    2024年02月09日
    浏览(45)
  • 【CSS系列】第六章 · CSS列表、表格、背景、鼠标属性

            Hello大家好, 我是【 麟-小白 】,一位 软件工程 专业的学生,喜好 计算机知识 。希望大家能够一起 学习进步 呀!本人是一名 在读大学生 ,专业水平有限,如发现 错误 或 不足之处 ,请多多指正!谢谢大家!!!         如果 小哥哥小姐姐们 对我的文章感兴趣

    2024年02月13日
    浏览(55)
  • 【零基础学web前端】CSS学习,字体属性,文本属性,背景属性,圆角矩形属性

    前言: 大家好,我是 良辰丫 ,在上一篇文章中我们了解了CSS引入方式,CSS基础选择器,CSS复合选择器,今天我们继续学习CSS的相关知识点.💞💞 🧑个人主页:良辰针不戳 📖所属专栏:零基础学web前端 🍎励志语句:生活也许会让我们遍体鳞伤,但最终这些伤口会成为我们一辈子的

    2024年02月05日
    浏览(79)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包