CSS 常用样式background背景属性

一、背景颜色 background-color

CSS中的background-color是用来设置HTML元素的背景颜色的一个属性。它可以接受各种颜色值，包括具有名称的颜色和十六进制颜色值。

以下是一些示例代码：

设置元素的背景颜色为红色：

background-color: red;

设置元素的背景颜色为十六进制颜色值：

background-color: #00ff00; /* 绿色 */

设置元素的背景颜色为rgba颜色值：

background-color: rgba(255, 0, 0, 0.5); /* 半透明红色 */

在上面的代码中，background-color属性的值是用来定义HTML元素的背景颜色的。在第一个例子中，背景颜色被设置为红色。在第二个例子中，背景颜色被设置为十六进制颜色值。在第三个例子中，背景颜色被设置为一个RGBA颜色值，其中红色的值为255，绿色和蓝色的值都为0，透明度为0.5（半透明）。

二、背景图片 background-image

CSS的"background-image"属性可以用于为元素设置背景图片。可以将图片文件的路径作为"background-image"属性的值，或者使用URL()函数指定图片文件的路径。

例如，下面的代码将一个名为"bg.jpg"的图片作为元素的背景图片：

div {background-image: url("bg.jpg");
}

多个背景图片可以用逗号分隔：

div {background-image: url("bg1.jpg"), url("bg2.jpg");
}

也可以将图片的URL指定为变量。例如：

:root {--bg-url: url("bg.jpg");
}div {background-image: var(--bg-url);
}

三、背景重复 background-repeat

background-repeat属性定义了背景图像是否重复，如果图像重复，如何重复。

该属性可以接受以下值：

  • repeat：默认值，背景图像在水平和垂直方向上重复。
  • repeat-x：背景图像在水平方向上重复。
  • repeat-y：背景图像在垂直方向上重复。
  • no-repeat：背景图像不重复，只显示一次。

例如，可以使用以下CSS规则将背景图像设置为在水平和垂直方向上重复：

body {background-image: url("example.jpg");background-repeat: repeat;
}

四、背景定位 background-position

CSS的 background-position 属性用于定义背景图片的起始位置。它接受两个值，分别表示水平和垂直方向上的位置。默认值是 0% 0% ，即表示背景图片的左上角与容器的左上角对齐。

语法如下：

background-position: 水平位置 垂直位置;

其中，水平位置可以使用关键字或者百分数表示，也可以使用像素或其他长度单位表示。 垂直位置同理。

使用示例：

/* 将背景图片的左上角与容器的右上角对齐 */
background-position: right top;/* 将背景图片的中心与容器的中心对齐 */
background-position: center center;/* 将背景图片的右下角与容器的右下角对齐 */
background-position: 100% 100%;

可以通过组合不同的值来调整背景图片的位置。如果只指定一个值，则另一个值默认为50%，表示居中对齐。

五、背景附着 background-attachment

CSS属性background-attachment用于设置背景图像是否固定或随着页面滚动而滚动。该属性可取以下值：

  • scroll: 默认值，背景图像随着页面滚动而滚动。
  • fixed: 背景图像固定，不随页面滚动而滚动。
  • local: 背景图像相对于元素滚动，而不是页面滚动。当元素本身可以滚动时，这个属性很有用。
  • initial: 将该属性重置为其默认值.
  • inherit: 从父元素继承该属性的值。

例如，以下代码将设置一个固定的背景图像：

body {background-image: url(background.jpg);background-attachment: fixed;
}

六、综合写法

CSS的background属性是一种综合属性，可以通过一条语句声明多个背景属性。以下是一些常见的使用方式：

基本语法

background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position];

属性说明

  • background-color：设置背景颜色。可以使用颜色值、rgb值、十六进制值等。
  • background-image：设置背景图片。可以使用图片的url。
  • background-repeat：设置背景图片是否重复。可以设置为repeat、repeat-x、repeat-y、no-repeat等。
  • background-attachment：设置背景图片是否固定或随着页面滚动。可以设置为scroll、fixed等。
  • background-position：设置背景图片的位置。可以设置为left top、center center、right bottom等。

代码实例

/* 设置背景颜色 */
background: #f7f7f7;/* 使用图片作为背景 */
background: url("bg.png");/* 设置背景图片不重复 */
background: no-repeat url("bg.png");/* 将背景图片固定在页面 */
background: fixed url("bg.png");/* 设置背景图片居中 */
background: center center url("bg.png");

背景图像将被放置在内容框之前，如果指定了边框，那么会覆盖部分边框。

七、背景应用

CSS背景属性可以用来设置元素的背景颜色、背景图像、背景重复方式等。以下是几个常用的背景属性及其应用：

  1. background-color：设置元素的背景颜色。 例如： background-color: #f5f5f5;

  2. background-image：设置元素的背景图像。 例如： background-image: url("img/bg.jpg");

  3. background-repeat：设置背景图像的重复方式。 例如： background-repeat: repeat-x;

  4. background-position：设置背景图像的位置。 例如： background-position: center;

  5. background-size：设置背景图像的大小。 例如： background-size: cover;

  6. background-attachment：设置背景图像的滚动方式。 例如： background-attachment: fixed;

综上所述，通过使用CSS背景属性，可以让网页更加美观、生动。

八、CSS3 新增背景属性

CSS3 新增的背景属性有以下几个：

  1. background-clip：定义背景的裁剪区域；
  2. background-origin：定义背景图片的位置区域；
  3. background-size：设置背景图片的尺寸；
  4. background-image：设置背景图片；
  5. background-repeat：设置背景图片的平铺方式；
  6. background-position：设置背景图片的位置；
  7. background-color：设置背景颜色。

以下是详细解析和代码实例：

  1. background-clip

定义背景的裁剪区域，可以将背景图片裁剪到指定的区域内。

属性值：

  • border-box：裁剪到边框区域内；
  • padding-box：裁剪到 padding 区域内；
  • content-box：裁剪到内容区域内；
  • inherit：继承父元素的属性值。

代码实例：

<style>div {width: 200px;height: 200px;border: 10px solid #000;padding: 20px;background-image: url('bg.jpg');background-clip: padding-box;}
</style>
<div></div>

  1. background-origin

定义背景图片的位置区域，可以设置背景图片从哪个位置开始显示。

属性值：

  • border-box：图片从边框区域开始显示；
  • padding-box：图片从 padding 区域开始显示；
  • content-box：图片从内容区域开始显示；
  • inherit：继承父元素的属性值。

代码实例：

<style>div {width: 200px;height: 200px;border: 10px solid #000;padding: 20px;background-image: url('bg.jpg');background-origin: content-box;}
</style>
<div></div>

  1. background-size

设置背景图片的尺寸，可以按照指定的比例缩放图片。

属性值：

  • auto：自动适应尺寸；
  • contain：缩放图片以适应容器；
  • cover：缩放图片以填满容器；
  • length：指定长度值；
  • percentage：指定百分比；
  • inherit：继承父元素的属性值。

代码实例：

<style>div {width: 200px;height: 200px;border: 10px solid #000;background-image: url('bg.jpg');background-size: cover;}
</style>
<div></div>

  1. background-image

设置背景图片。

属性值：

  • url：指定图片路径；
  • none：不设置背景图片。

代码实例：

<style>div {width: 200px;height: 200px;background-image: url('bg.jpg');}
</style>
<div></div>

  1. background-repeat

设置背景图片的平铺方式。

属性值：

  • repeat：平铺；
  • repeat-x：水平平铺；
  • repeat-y：垂直平铺；
  • no-repeat：不平铺；
  • space：填充并平均分布；
  • round：缩放并平均分布；
  • inherit：继承父元素的属性值。

代码实例：

<style>div {width: 300px;height: 200px;background-image: url('bg.jpg');background-repeat: repeat-x;}
</style>
<div></div>

  1. background-position

设置背景图片的位置。

属性值：

  • length：指定位置距离；
  • percentage：指定百分比；
  • left/top/right/bottom/center：指定位置；
  • inherit：继承父元素的属性值。

代码实例：

<style>div {width: 300px;height: 200px;background-image: url('bg.jpg');background-position: center;}
</style>
<div></div>

  1. background-color

设置背景颜色。

属性值：

  • 颜色名、十六进制、RGB、RGBA。

代码实例：

<style>div {width: 300px;height: 200px;background-color: #f00;}
</style>
<div></div>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/103849.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Golang 实现接口和继承

Golang 实现接口和继承

小猴子继承了老猴子&#xff0c;这样老猴子拥有的能力包括字段&#xff0c;方法就会自动的被老猴子继承。 小猴子不需要做任何处理就可以拿到老猴子的字段和它的方法&#xff0c;因为是继承关系。 但是小猴子还会其他的技能&#xff0c;比如还会像小鸟一样飞翔&#xff0c;希…
阅读更多...
pytorch中的池化函数

pytorch中的池化函数

PyTorch 提供了多种池化函数&#xff0c;用于对输入数据进行不同类型的池化操作。以下是一些常用的 PyTorch 池化函数&#xff1a; 平均池化&#xff08;Average Pooling&#xff09;: nn.AvgPool1d: 一维平均池化。nn.AvgPool2d: 二维平均池化。nn.AvgPool3d: 三维平均池化。 …
阅读更多...
VR全景营销颠覆传统营销，让消费者身临其境

VR全景营销颠覆传统营销，让消费者身临其境

随着VR的普及&#xff0c;各种VR产品、功能开始层出不穷&#xff0c;并且在多个领域都有落地应用&#xff0c;例如文旅、景区、酒店、餐饮、工厂、地产、汽车等&#xff0c;在这个“内容为王”的时代&#xff0c;VR全景展示也是一种新的内容表达方式。 VR全景营销让消费者沉浸式…
阅读更多...
postman 获取HTML 里name=token 的值

postman 获取HTML 里name=token 的值

<input type"hidden" name"token" value"LT-93387-t7KaInf3Fox2Hd0F24eHpBFg7BcNAp" /> 接口返回的HTML&#xff0c;可以使用cheerio获取具体的值&#xff0c;如下&#xff1a; //引入cheerio const $ cheerio.load(responseBody) //解…
阅读更多...
计算机毕业设计选什么题目好？springboot 职业技术学院图书管理系统

计算机毕业设计选什么题目好？springboot 职业技术学院图书管理系统

✍✍计算机编程指导师 ⭐⭐个人介绍&#xff1a;自己非常喜欢研究技术问题&#xff01;专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目&#xff1a;有源码或者技术上的问题欢迎在评论区一起讨论交流&#xff01; ⚡⚡ Java实战 |…
阅读更多...
【深度学习实验】卷积神经网络（八）：使用深度残差神经网络ResNet完成图片多分类任务

【深度学习实验】卷积神经网络（八）：使用深度残差神经网络ResNet完成图片多分类任务

目录 一、实验介绍 二、实验环境 1. 配置虚拟环境 2. 库版本介绍 三、实验内容 0. 导入必要的工具包 1. 构建数据集&#xff08;CIFAR10Dataset&#xff09; a. read_csv_labels&#xff08;&#xff09; b. CIFAR10Dataset 2. 构建模型&#xff08;FeedForward&#x…
阅读更多...
SQL开发笔记之专栏介绍

SQL开发笔记之专栏介绍

Sql是用于访问和处理数据库的标准计算机语言&#xff0c;使用SQL访问和处理数据系统中的数据&#xff0c;这类数据库包括&#xff1a;Mysql、PostgresSql、Oracle、Sybase、DB2等等&#xff0c;数据库无非围绕着“增删改查”的核心业务进行开发。并且目前绝大多数的后端程序开发…
阅读更多...
构建精致 Chrome 插件：开箱即用的 TypeScript 模板 | 开源日报 No.51

构建精致 Chrome 插件：开箱即用的 TypeScript 模板 | 开源日报 No.51

tonsky/FiraCode Stars: 72.7k License: OFL-1.1 Fira Code 是一种免费的等宽字体&#xff0c;具有编程连字符。 Fira Code 提供了丰富多样的箭头和标点符号调整功能。Fira Code 支持各种不同的字符变体、风格集和其他字体特性&#xff0c;以满足用户个性化需求。Fira Code …
阅读更多...
【Hello Algorithm】暴力递归到动态规划（一）

【Hello Algorithm】暴力递归到动态规划（一）

暴力递归到动态规划&#xff08;一&#xff09; 斐波那契数列的动态规划机器人走路初级递归初级动态规划动态规划 先后选牌问题初级递归初级动态规划动态规划 我们可以一句话总结下动态规划 动态规划本质是一种以空间换时间的行为 如果你发现有重复调用的过程 在经过一次之后把…
阅读更多...
windows频繁更新问题解决方案

windows频繁更新问题解决方案

解决方案&#xff1a;将更新策略增加到无穷大 1.windowsr 输入regedit 2.找到&#xff1a;HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\WindowsUpdate\UX\Settings 3.右键新建DWORD32 4.命名&#xff1a;FlightSettingsMaxPauseDays 5.双击&#xff1a;数值数据改为4321 基数&#…
阅读更多...
Spring是什么？为什么要使用Spring？

Spring是什么？为什么要使用Spring？

目录 前言 一、Spring是什么&#xff1f; 1.1 轻量级 1.2 JavaEE的解决方案 二、为什么要使用Spring 2.1 传统方式完成业务逻辑 2.2 使用Spring模式完成业务逻辑 三、为什么使用Spring&#xff1f; 前言 本文主要介绍Spring是什么&#xff0c;并且解释为何要去使用Spring&…
阅读更多...
vite + vu3 + ts 项目，npm run build 报错

vite + vu3 + ts 项目，npm run build 报错

新建了vite 项目&#xff0c;build的时候报错&#xff1a; npm ERR! demo10.0.0 build: vue-tsc && vite build npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the demo10.0.0 build script.npm ERR! This is probably not a problem with npm. There is like…
阅读更多...
【Vue Router 3】入门

【Vue Router 3】入门

简介 Vue Router让SPA&#xff08;Single-page Application&#xff09;的构建更加容易。 Vue Router的功能&#xff1a; 嵌套的路由/视图映射模块化的、基于组件的router配置route params, query, wildcards由Vue过渡系统支持的视图过渡效果细粒度&#xff08;fine-grained…
阅读更多...
c语言练习87：合并两个有序数组

c语言练习87：合并两个有序数组

合并两个有序数组 合并两个有序数组https://leetcode.cn/problems/merge-sorted-array/ 给你两个按 非递减顺序 排列的整数数组 nums1 和 nums2&#xff0c;另有两个整数 m 和 n &#xff0c;分别表示 nums1 和 nums2 中的元素数目。 请你 合并 nums2 到 nums1 中&#xff…
阅读更多...
动态资源平衡：主流虚拟化 DRS 机制分析与 SmartX 超融合的实现优化

动态资源平衡：主流虚拟化 DRS 机制分析与 SmartX 超融合的实现优化

资源的动态调度是虚拟化软件&#xff08;或超融合软件&#xff09;中的一项重要功能&#xff0c;主要指在虚拟化集群中&#xff0c;通过动态改变虚拟机的分布&#xff0c;达到优化集群可用性的目标。这一功能以 VMware vSphere 发布的 Distributed Resource Scheduler&#xff…
阅读更多...
day62:ARMday9,I2c总线通信

day62:ARMday9,I2c总线通信

作业&#xff1a;按键中断实现LED1、蜂鸣器、风扇 key_in.c: #include "key_in.h"void gpio_init() {//RCC使能//GPIOERCC->MP_AHB4ENSETR | (0x1<<4);//GPIOBRCC->MP_AHB4ENSETR | (0x1<<1);//PE10、PB6、PE9输出模式GPIOE->MODER & ~(0…
阅读更多...
AutoGPT：让 AI 帮你完成任务事情 | 开源日报 No.54

AutoGPT：让 AI 帮你完成任务事情 | 开源日报 No.54

Significant-Gravitas/AutoGPT Stars: 150.4k License: MIT AutoGPT 是开源 AI 代理生态系统的核心工具包。它采用模块化和可扩展的框架&#xff0c;使您能够专注于以下方面&#xff1a; 构建 - 为惊人之作打下基础。测试 - 将您的代理调整到完美状态。查看 - 观察进展成果呈…
阅读更多...
基于SpringBoot的网上订餐系统

基于SpringBoot的网上订餐系统

基于SpringBoot的网上订餐系统的设计与实现 开发语言&#xff1a;Java数据库&#xff1a;MySQL技术&#xff1a;SpringBootMyBatisVue工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 【主要功能】 角色&#xff1a;用户、管理员管理员&#xff1a;登录、个人中心、会员管理、…
阅读更多...
《DevOps 精要:业务视角》- 读书笔记（六）

《DevOps 精要:业务视角》- 读书笔记（六）

DevOps 精要:业务视角&#xff08;六&#xff09; 第6章 结语 第6章 结语 DevOps有自己的起源以及存在的前提。到2010年&#xff0c;随着条件成熟&#xff0c;形成了对信息科技中开发与运维进行管理的需求以及可能性。这引发了DevOps运动的兴起。 正如众多布道师经常提及的&a…
阅读更多...
大数据分析实践 | 过滤和抽样

大数据分析实践 | 过滤和抽样

文章目录 &#x1f4da;相关函数&#x1f407;数据读取和写入&#xff1a;read_csv和to_csv&#x1f407;数据过滤&#xff1a;pandas.DataFrame.loc&#x1f407;抽样&#xff1a;pandas.DataFrame.sample&#x1f407;删除缺失数据&#xff1a;dropha&#x1f407;添加元素&a…
阅读更多...
最新文章

Copyright @ 2022~2023