CSS 背景属性
1. background-color(背景颜色)

页面的背景颜色有四种属性值表示,分别是transparent(透明),RGB十进制颜色表示,十六进制颜色表示和颜色单词表示。

属性使用:

/*
background-color: transparent; // 透明
background-color: rgb(255,0,0); // 红色背景
background-color: #ff0000; // 红色背景
background-color: red; // 红色背景
*/
2. background-image(背景图片)

background-image可以引入一张图片作为元素的背景图像。默认情况下,background-image放置在元素的左上角,并在垂直和水平方向重复平铺。

语法:background-image: url('图片地址')
当同时定义了背景颜色和背景图像时,背景图像覆盖在背景颜色之上。 所以当背景图片没有被加载到,或者不能完全铺满元素时,就会显示背景颜色。
3. background-repeat(背景平铺方式)

CSS中,当使用图像作为背景了以后,都是默认把整个页面平铺满的,但是有时候在很多场合下面,页面并不需要这种默认的效果,而可能需要背景图像只显示一次,或者只按照指定方式进行平铺的时候,可以使用background-repeat来进行设置。

background-repeat专门用于设置背景图像的平铺方式,一般有四个值:

默认是repeat(平铺)
no-repeat(不平铺)
repeat-x(X轴平铺)
repeat-y(Y轴平铺)
4. background-position(背景定位)

CSS中支持元素对背景图像的定位摆放功能,就是利用background-position属性来实现,以页面中元素的左上角为原点(0,0),把元素的内部区域当成一个坐标轴(上边框为X轴,越往左X的值越大,左边框为Y轴,越往下Y轴的值就越大,反之亦然),然后计算出背景图片的左上角与圆点的距离(x轴和y轴的距离),然后把背景图片放入到指定的位置上,对背景图片的位置进行精确的控制和摆放。

background-position的值分成两个,使用空格隔开,前面一个是背景图片左上角的x轴坐标,后面一个是背景图片左上角的y轴坐标。两个值都可以是正、负值。

语法:background-position: x轴坐标 y轴坐标
背景定位的值除了是具体的数值以外,还可以是左(left)、中(center)、右(right)
5. background(背景样式缩写)

和字体属性一样,多个不同背景样式属性也是可以同时缩写的,不过不需要像字体那样按照一定的顺序,背景样式的缩写属性的顺序是不固定的,可以任意编排。

语法:background: 背景颜色  背景图片  背景平铺方式  背景定位;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS背景属性</title>
<style>
.c1{
width: 800px;
height: 600px;
border: 1px solid red;
/*background-color: #616161;*/
background-image: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201512%2F16%2F20151216233034_SvcEk.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1694941114&t=2c9c5a0a62949d8ee8640363a4c53a79");
background-repeat: no-repeat;
/*background-position: 100px 200px;*/
background-position: center center;
/*三合一简写形式*/
/*background: url("https://img1.baidu.com/it/u=1076648249,2160084473&fm=15&fmt=auto&gp=0.jpg") no-repeat center;*/
}
</style>
</head>
<body> <div class="c1">hello css!</div> </body>
</html>

9 CSS背景属性的更多相关文章

  1. CSS背景属性

    CSS背景属性 1.background-attachment 属性 scroll:默认值.背景图像会随着页面其余部分的滚动而移动. fixed:当页面的其余部分滚动时,背景图像不会移动. inher ...

  2. 你不知道的CSS背景—css背景属性全解

    CSS背景在网页设计中使用频率非常高,然而对于这个开发人员很熟悉的CSS属性,却隐藏着许多不为初级开发人员熟知的细节,这篇文章尝试扒开这层不为人知的面纱. 首先列举一下CSS中关于元素背景的所有属性并 ...

  3. CSS背景属性Background详解

    [转] 本文详解了CSS的背景属性Background,包括CSS3中新增的背景属性.如果你是个CSS初学者,还可以查看之前介绍的CSS浮动属性和CSS透明属性详解. CSS2 中有5个主要的背景(b ...

  4. CSS 背景属性

    background: 简写属性,作用是将背景属性置在一个声明中 background-attachment: 背景图像是否固定或者随着页面的其余部队滚动 background-color: 设置元素 ...

  5. CSS背景属性background

    background属性是所有背景属性的缩写: 以下是这些背景属性: background-color:背景颜色 你可以通过颜色名称(red/green/blue)来设置 也可以用十六进制(#fff/ ...

  6. [Web 前端] 011 css 背景属性

    1. 概览 参数 释义 background-color 背景颜色 background-image 背景图片 background-repeat 是否重复 background-position 定 ...

  7. css背景属性整理

    背景颜色 {background-color:red}/*常用十六进制颜色#fff*/ 图片 {background-image:url();} /*插入图片路径*/ 重复 {background-r ...

  8. css学习_css背景属性及其应用

    css背景属性及其应用 1.背景 2.背景简写 3.背景透明(css3) 4.背景缩放(css3) 5.多背景图片(css3) 6.凹凸文字效果

  9. CSS探案之 background背景属性剖析

    首先,我们先来看看两个css属性:background和background-color,对!就是这两位,相信大家在平时应该没少 麻烦人家把,反正我是这样,几乎也少会用到背景图,原因很简单:就是有点害 ...

  10. CSS的 背景属性

    ㈠背景色  background-color ⑴background-color 属性设置元素的背景颜色. ⑵元素背景的范围: background-color 属性为元素设置一种纯色.这种颜色会填充 ...

随机推荐

  1. GDI快速遍历位图像素

    使用DIB部分可直接快速访问像素 例如,此测试将记事本中的所有白色像素替换为绿色像素 HDC hDCScreen = GetDC(NULL); HWND hWndDest = FindWindow(L ...

  2. pytho代码分析示例

    a = 5 b = 6 c = 10 for i in range(n): for j in range(n): x = i * j y = j * j z = i * j for k in rang ...

  3. 亲测CentOS 8.2更换yum源报错Errors during downloading metadata for repository 'epel': - Status code解决办法

    重点 提一件拉胯的事:别去参考阿里和华为云官方镜像上面的解决办法,本人试了几遍,没luan用.拉胯!!!!!!!! 报错具体信息 Errors during downloading metadata ...

  4. linux下docker安装与初始

    1 docker的安装与使用初识 1 docker的安装 # step 1: 安装必要的一些系统工具 sudo yum install -y yum-utils device-mapper-persi ...

  5. ASP.NET 跨域配置

    报错信息 The 'Access-Control-Allow-Origin' header is present on the requested resource 解决方案 web.config配置 ...

  6. SpringBoot面试题的零碎整理

    面试题1:简述一下Springboot相对SSM做了哪些提升? 首先,SpringBoot是采用"约定大于配置"(Convention over Configuration)的理念 ...

  7. [Linux] 无显示器 无键盘 网线直连传输文件

    有显示器可以操作 这种情况下要简单的多,基本思想是,网线直连之后让其中一方当作网关,分配好ip地址,比如说192.168.8.1,网关也是192.168.8.1即可,如果要填写子网掩码就写255.25 ...

  8. 千卡利用率超98%,详解JuiceFS在权威AI测试中的实现策略

    2023 年 9 月,AI 领域的权威基准评测 MLPerf 推出了 Storage Benchmark.该基准测试通过模拟机器学习 I/O 负载的方法,在不需要 GPU 的情况下就能进行大规模的性能 ...

  9. linux的简单使用

    了解Linux的简单使用 Linux的安装 下载Linux Ubuntu版本和虚拟机VMware软件. 我已经提前下载好了,下载好的文件分享出来bd 这个是文件夹内的VMWare软件的注册码,安装完成 ...

  10. union和union all的区别?

    一. 显示结果不同 union会自动压缩多个结果集合中的重复结果,而union all则将所有的结果集全部显示出来 二.对重复结果的处理不同 union all是直接连接,取到的是所有值,记录可能有的 ...