当前位置: 首页 > news >正文

HTML5+Css3(背景属性background)

css背景属性 background

1. background-color背景颜色

  • 背景颜色可以用“十六进制”、“rgb()”、“rgba()”或“英文单词”表示

2. background-image:url(路径);背景图片

  • 也可以写成 background:url();

3. background-repeat背景重复

  • 属性值:
    - repeat:x,y平铺(默认)- repeat- x:水平方向平铺- repeat-y:垂直方向平铺- no-repeat:不平铺,(照片不重复)

4. backgroun-position 背景图片位置

  • 属性值:backgroun-position:向右移动 向下移动 ;
  • 向右移动:可以写向左移动(left),向右移动(right),居中(center);也可以是像素(具体值),要是是负值表示向左移动
  • 向下移动:可以向上移动(top),向下移动(bottom),居中(center),也可以是具体值,或者用像素表示,要是负值就是向上移动
  • 他们的组合有:
    <!-- 横向居中,竖向居中、顶部、底部 -->backgroun-position: center center ;backgroun-position: center top ;backgroun-position: center bottom ;<!-- 横向向左,竖向顶部、居中、底部 -->backgroun-position: left top ;backgroun-position: left center ;backgroun-position: left bottom ;<!-- 横向向右,竖向顶部、居中、底部 -->backgroun-position: right top ;backgroun-position: right center ;backgroun-position: right bottom ;
    

5. backgroun复合属性

  • backgroun:url() 平铺 照片位置 照片大小 颜色 ; (位置不固定)

6. background-attachment 背景固定,页面滚动

  • 决定背景图像的位置是在“视口”内固定,或者随着它的区块滚动
  • scroll: 默认值。背景图片随着页面的滚动而滚动,相对于元素本身固定,而不是随着它的内容滚动
  • fixed:此关键属性值表示背景相对于视口固定。即使一个元素拥有滚动机制,背景不会随着元素的内容滚动
  • local: 背景相对于元素的内容固定。如果一个元素拥有滚动机制,背景将会随着元素的内容滚动,同时背景图图片随着页面的滚动而滚动

7. background-size 背景尺寸

  • 背景图片的宽高大小
x  y	:	background-size: 100px 200px; (x y 数值,分别表示背景图片宽高大小)
x% y%	:background-size: 50% 20%; (百分比是相对于盒子的宽高而言,)
x auto	:background-size: 100px auto; (是相对于第一个值宽来自动缩放)
contain :background-size: contain; (背景图片智能改变尺寸以容纳到盒子里)
cover   :background-size: cover; (背景图片智能改变尺寸以撑满盒子)

8. background-clip 设置元素的背景,裁剪

  • background-clip设置元素的背景(背景图片或颜色)是否延伸到“边框”、“内边距盒子”、“内容盒子”下面
说明
border-box默认值。背景绘制在边框方框内。 延伸至边框边缘
padding-box背景绘制在内边距方框内。 延伸至内边距边缘
content-box背景绘制在内容方框内。 仅限于内容区域
text背景被裁剪成文字的前景色。

9. background-origin 背景图片的定位区域

描述
padding-box背景图片的摆放以 padding 区域为参考 默认值 从边框开始绘制
border-box背景图片的摆放以 border 区域为参考 从内边距开始绘制
content-box背景图片的摆放以 content 区域为参考 从内容区域开始绘制

10. background-blend-mode

  • 设置背景层之间的混合模式。适用于有多重背景图像或背景颜色与背景图像混合的情况。可选值众多,如normal、multiply、screen、overlay等。

相关文章:

HTML5+Css3(背景属性background)

css背景属性 background 1. background-color背景颜色 背景颜色可以用“十六进制”、“rgb()”、“rgba()”或“英文单词”表示 2. background-image:url(路径);背景图片 也可以写成 background:url(); 3. background-repeat背景重复 属性值&#xff1a; - repeat:x,y平铺…...

高亚科技助力优巨新材,打造高效数字化研发项目管理平台

近日&#xff0c;中国企业管理软件资深服务商高亚科技与广东优巨先进新材料股份有限公司&#xff08;以下简称“优巨新材”&#xff09;正式签署合作协议&#xff0c;共同推进产品研发管理数字化升级。此次合作的主要目标是通过8Manage PM项目管理系统&#xff0c;提升优巨新材…...

用布尔表达式巧解数字电路图

1.前置知识 明确AND,OR,XOR,NOR,NOT运算的规则 参见:E25.【C语言】练习:修改二进制序列的指定位 这里再补充一个布尔运算符:NOR,即先进行OR运算,再进行NOT运算 如下图为其数字电路的符号 注意到在OR符号的基础上,在尾部加了一个(其实由简化而来) 附:NOR的真值表 2.R-S触发…...

面试--开源框架面试题集合

Spring 谈谈自己对于 Spring IoC 的了解什么是 IoC?IoC 解决了什么问题?什么是 Spring Bean&#xff1f;将一个类声明为 Bean 的注解有哪些?Component 和 Bean 的区别是什么&#xff1f;注入 Bean 的注解有哪些&#xff1f;Autowired 和 Resource 的区别是什么&#xff1f;…...

如何选择医疗器械管理系统?盘谷医疗符合最新版GSP要求

去年12月7日&#xff0c;新版《医疗器械经营质量管理规范》正式发布&#xff0c;并于今年7月1日正式实施。新版GSP第五十一条提出“经营第三类医疗器械的企业&#xff0c;应当具有符合医疗器械经营质量管理要求的计算机信息系统&#xff0c;保证经营的产品可追溯”&#xff0c;…...

shell 脚本批量更新本地git仓库

文章目录 一、问题概述二、解决方法三、运行效果1. windows2. centos 一、问题概述 你是否遇到这样的场景&#xff1a; 本地git仓库克隆了线上的多个项目&#xff0c;需要更新时&#xff0c;无法象svn一样&#xff0c;选中多个项目一起更新。 只能苦逼的一个个选中&#xff0c…...

Linux相关概念和易错知识点(12)(命令行参数、环境变量、本地变量)

1.命令行参数 &#xff08;1&#xff09;main函数的参数int argc和char* argv[]是什么&#xff1f; main函数可以带参数&#xff0c;即int main(int argc, char* argv[])&#xff0c;(int argc, char* argv[])叫做命令行参数列表&#xff0c;int argc叫参数的个数&a…...

wenserver中 一些常见的 错误码

EINTR 是 Linux 系统中定义的一个错误码&#xff0c;代表“被信号中断”。当一个系统调用在执行过程中被一个信号处理函数中断时&#xff0c;这个系统调用会立即返回错误&#xff0c;并且 errno 被设置为 EINTR。 举个例子 read函数是阻塞的 现在没有数据要读 我们read一直阻…...

【电路笔记】-求和运算放大器

求和运算放大器 文章目录 求和运算放大器1、概述2、反相求和放大器3、同相求和放大器4、减法放大器5、应用5.1 音频混合器5.2 数模转换器 (DAC)6、总结1、概述 在我们之前有关运算放大器的大部分文章中,仅将一个输入应用于反相或非反相运算放大器的输入。在本文中,将讨论一种…...

java实现桌面程序开机自启动

问题&#xff1a; 最近用java写一个桌面闹钟程序&#xff0c;需要实现开机自启动功能 解决办法&#xff1a; jna官网&#xff1a;https://github.com/java-native-access/jna?tabreadme-ov-file 使用jna库可以轻松实现 下载jna-5.15.0.jar和jna-platform-5.15.0.jar这两个库…...

Vuex 使用实例

文章目录 Vuex介绍使用步骤安装使用定义配置文件代码解释&#xff1a; 导入到 App.vue使用使用vuex Vuex 介绍 简单来说就是&#xff0c;多个组件需要共享一个data&#xff0c;原本只能通过父子组件来进行&#xff0c;但是vuex可以实现共享data 使用步骤 安装 npm install v…...

深度分离卷积

深度可分离卷积&#xff08;Depthwise Separable Convolution&#xff09;是一种高效的卷积操作&#xff0c;它将传统卷积操作分解为两个独立的步骤&#xff1a;深度卷积&#xff08;Depthwise Convolution&#xff09; 和 逐点卷积&#xff08;Pointwise Convolution&#xff…...

JSONL 文件的检查和修订器

下面是一个JSONL 文件的检查和修订器,代码如下: import json import tkinter as tk from tkinter import filedialog, messageboxdef check_jsonl_file(input_file, log_file, output_file=None):errors = []valid_lines = []with open(input_file, r, encoding=utf-8) as in…...

输电线路悬垂线夹检测无人机航拍图像数据集,总共1600左右图片,悬垂线夹识别,标注为voc格式

输电线路悬垂线夹检测无人机航拍图像数据集&#xff0c;总共1600左右图片&#xff0c;悬垂线夹识别&#xff0c;标注为voc格式 输电线路悬垂线夹检测无人机航拍图像数据集介绍 数据集名称 输电线路悬垂线夹检测数据集 (Transmission Line Fittings Detection Dataset) 数据集…...

杭电合集小tips

刷HDU的题过程中&#xff0c;有一些值得注意的小问题&#xff0c;这里我踩坑之后记录下来&#xff0c;以便回顾与各位分享 一&#xff0c;关于语言的使用 主要大家还是用C和C多&#xff0c;但是注意的是&#xff0c;#include<bits/stdc.h>这个文件是G自带的&#xff0c…...

Python的输入输出函数

1.输入函数 Python的输入函数是input().input的引号里面是提示的内容&#xff0c;从键盘输入的任何字符都会当成字符串赋值给变量. n input("请输入:") print(type(n)) print(n) 输出结果为&#xff1a; 请输入:33 <class str> 33 2.输出函数 Python的内置…...

如何进行搭建与部署云主机?

云主机是一种基于虚拟化技术的服务器&#xff0c;云主机可以为用户提供一种非常高效且可扩展的计算机资源服务&#xff0c;主要是由操作系统和云硬盘等基础的计算组件所构成的&#xff0c;用户能够根据自身的需求来选择相关的配置规格&#xff0c;来满足不同的业务需求。 那么我…...

Biomamba求职| 国奖+4篇一作SCI

转眼间我也要参加秋招啦&#xff0c;认真的求职帖&#xff0c;各位老师/老板欢迎联系~其它需要求职的小伙伴也欢迎把简历发给我们&#xff0c;大家一起找工作。 一、基本信息 姓名&#xff1a;Biomamba 性别&#xff1a;男 出厂年份&#xff1a;1998 籍贯&#xff1a;浙江…...

Python 工具库每日推荐 【Pandas】

文章目录 引言Python数据处理库的重要性今日推荐:Pandas工具库主要功能:使用场景:安装与配置快速上手示例代码代码解释实际应用案例案例:销售数据分析案例分析高级特性数据合并和连接时间序列处理数据透视表扩展阅读与资源优缺点分析优点:缺点:总结【 已更新完 TypeScrip…...

电影选票选座系统|影院购票|电影院订票选座小程序|基于微信小程序的电影院购票系统设计与实现(源码+数据库+文档)

电影院订票选座小程序 目录 基于微信小程序的电影院购票系统设计与实现 一、前言 二、系统功能设计 三、系统实现 1、用户功能实现 2、管理员功能实现 &#xff08;1&#xff09;影院信息管理 &#xff08;2&#xff09;电影信息管理 &#xff08;3&#xff09;已完成…...

OpenLayers 可视化之热力图

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 热力图&#xff08;Heatmap&#xff09;又叫热点图&#xff0c;是一种通过特殊高亮显示事物密度分布、变化趋势的数据可视化技术。采用颜色的深浅来显示…...

ubuntu搭建nfs服务centos挂载访问

在Ubuntu上设置NFS服务器 在Ubuntu上&#xff0c;你可以使用apt包管理器来安装NFS服务器。打开终端并运行&#xff1a; sudo apt update sudo apt install nfs-kernel-server创建共享目录 创建一个目录用于共享&#xff0c;例如/shared&#xff1a; sudo mkdir /shared sud…...

聊聊 Pulsar:Producer 源码解析

一、前言 Apache Pulsar 是一个企业级的开源分布式消息传递平台&#xff0c;以其高性能、可扩展性和存储计算分离架构在消息队列和流处理领域独树一帜。在 Pulsar 的核心架构中&#xff0c;Producer&#xff08;生产者&#xff09; 是连接客户端应用与消息队列的第一步。生产者…...

Auto-Coder使用GPT-4o完成:在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务

通过akshare库&#xff0c;获取股票数据&#xff0c;并生成TabPFN这个模型 可以识别、处理的格式&#xff0c;写一个完整的预处理示例&#xff0c;并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务&#xff0c;进行预测并输…...

如何在看板中有效管理突发紧急任务

在看板中有效管理突发紧急任务需要&#xff1a;设立专门的紧急任务通道、重新调整任务优先级、保持适度的WIP&#xff08;Work-in-Progress&#xff09;弹性、优化任务处理流程、提高团队应对突发情况的敏捷性。其中&#xff0c;设立专门的紧急任务通道尤为重要&#xff0c;这能…...

Java面试专项一-准备篇

一、企业简历筛选规则 一般企业的简历筛选流程&#xff1a;首先由HR先筛选一部分简历后&#xff0c;在将简历给到对应的项目负责人后再进行下一步的操作。 HR如何筛选简历 例如&#xff1a;Boss直聘&#xff08;招聘方平台&#xff09; 直接按照条件进行筛选 例如&#xff1a…...

IP如何挑?2025年海外专线IP如何购买?

你花了时间和预算买了IP&#xff0c;结果IP质量不佳&#xff0c;项目效率低下不说&#xff0c;还可能带来莫名的网络问题&#xff0c;是不是太闹心了&#xff1f;尤其是在面对海外专线IP时&#xff0c;到底怎么才能买到适合自己的呢&#xff1f;所以&#xff0c;挑IP绝对是个技…...

Go语言多线程问题

打印零与奇偶数&#xff08;leetcode 1116&#xff09; 方法1&#xff1a;使用互斥锁和条件变量 package mainimport ("fmt""sync" )type ZeroEvenOdd struct {n intzeroMutex sync.MutexevenMutex sync.MutexoddMutex sync.Mutexcurrent int…...

FFmpeg:Windows系统小白安装及其使用

一、安装 1.访问官网 Download FFmpeg 2.点击版本目录 3.选择版本点击安装 注意这里选择的是【release buids】&#xff0c;注意左上角标题 例如我安装在目录 F:\FFmpeg 4.解压 5.添加环境变量 把你解压后的bin目录&#xff08;即exe所在文件夹&#xff09;加入系统变量…...

python读取SQLite表个并生成pdf文件

代码用于创建含50列的SQLite数据库并插入500行随机浮点数据&#xff0c;随后读取数据&#xff0c;通过ReportLab生成横向PDF表格&#xff0c;包含格式化&#xff08;两位小数&#xff09;及表头、网格线等美观样式。 # 导入所需库 import sqlite3 # 用于操作…...