当前位置: 首页 > 编程日记 > 正文

css背景属性

CSS背景:

属性

描述

background

简写属性,作用是将背景属性设置在一个声明中。

background-attachment

背景图像是否固定或者随着页面的其余部分滚动。

background-color

设置元素的背景颜色。

background-image

把图像设置为背景。

background-position

设置背景图像的起始位置。

background-repeat

设置背景图像是否及如何重复。

 

 

 

 

 

 

 

 

1.背景色:background-color属性,设置元素的背景颜色;

<1>元素背景的范围:

background-color 属性为元素设置一种纯色。这种颜色会填充元素的内容、内边距和边框区域,扩展到元素边框的外边界(但不包括外边距)。如果边框有透明部分(如虚线边框),会透过这些透明部分显示出背景色。

<2>可能的取值:

描述

color_name

规定颜色值为颜色名称的背景颜色(比如 red)。

hex_number

规定颜色值为十六进制值的背景颜色(比如 #ff0000)。

rgb_number

规定颜色值为 rgb 代码的背景颜色(比如   rgb(255,0,0))。

transparent

默认值,背景颜色为透明。

inherit

规定应该从父元素继承 background-color 属性的设置。

Ps: background-color 不能继承。

2.背景图像:background-image属性,设置元素的背景图像;

  <1>元素的应用:

元素的背景占据了元素的全部尺寸,包括内边距和边框,但不包括外边距。默认地,背景图像位于元素的左上角,并在水平和垂直方向上重复。

<2>可能的值:

描述

url

指向图像的路径。

none

默认值,不显示背景图像。

inherit

规定应该从父元素继承 background-image 属性的设置。

Ps: background-image 不能继承,请设置一种可用的背景颜色,这样的话,假如背景图像不可用,页面也可获得良好的视觉效果

3.背景重复:background-repeat属性,设置元素的背景平铺的方式;

描述

repeat

默认值,图像在水平垂直方向上都平铺

repeat-x

图像只在水平方向上重复

repeat-y

图像只在垂直方向上重复

no-repeat

不允许图像在任何方向上平铺

4.背景定位:background-position属性,设置背景图像的起始位置;

<1>可能的值:

描述

top left

top center

top right

center left

center center

center right

bottom left

bottom center

bottom right

如果您仅规定了一个关键词,那么第二个值将是"center"。

默认值:0% 0%。

x% y%

第一个值是水平位置,第二个值是垂直位置。

左上角是 0% 0%。右下角是 100% 100%。

如果您仅规定了一个值,另一个值将是 50%。

xpos ypos

第一个值是水平位置,第二个值是垂直位置。

左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。

如果您仅规定了一个值,另一个值将是50%。

您可以混合使用 % 和 position 值。

Ps: 需要把 background-attachment 属性设置为 "fixed",才能保证该属性在 Firefox 和 Opera 中正常工作。

5.背景关联:background-attachment属性,设置背景图像是否固定或者随着页面的其余部分滚动。

<1>可能的值:

描述

scroll

默认值。背景图像会随着页面其余部分的滚动而移动。

fixed

当页面的其余部分滚动时,背景图像不会移动。

inherit

规定应该从父元素继承 background-attachment 属性的设置。

 

转载于:https://www.cnblogs.com/alog0210/p/background_log.html

相关文章:

scp服务器复制命令跳过已有的文件夹,Linux scp命令复制文件到其它服务器上

例如&#xff1a;我想将59.64.30.101中的文件复制到59.64.28.78服务器。步骤如下&#xff1a;1.59.64.30.101终端执行如下命令#ssh-keygen -t rsa2.密钥生成后会在/root/.ssh/文件夹下产生两个文件id_rsa id_rsa.pub将id_rsa.pub文件复制到59.64.28.78执行如下命令scp id_rsa.p…

Win2008学习(二),群集的仲裁配置

当群集中的节点发生故障时&#xff0c;会有其它节点继续提供服务。不过&#xff0c;当节点之间的通信有问题或太多故障节点时&#xff0c;群集服务就会停止&#xff0c;可是群集可以容纳多少个节点故障呢&#xff1f;这要由仲裁配置&#xff08;Quorum Configuration&#xff0…

前端token刷新并发处理

添加中间件&#xff0c;处理多个前端来的请求时&#xff0c;如果token需要刷新&#xff0c;先查看缓存&#xff0c;如果没有就在redis中做个标志位进行短期缓存&#xff0c;其他的请求发现缓存中的token&#xff0c;就不再刷新token了。这样就避免了重复刷新token的问题。 中间…

Rocksdb 的一些参数调优策略

文章目录写性能优化CF write buffer sizeDB write buffer size读性能优化block cachebloom filterCompression 压缩Compaction优化通用workload的配置本文在rocksdb 整个读写链路基础上给出一些简单的调优策略&#xff0c;主要是通过调整一些 参数来满足我们大多数workload的性…

Java项目:酒店管理系统(java+SSM+jsp+mysql+maven)

源码获取&#xff1a;博客首页 "资源" 里下载&#xff01; 主要技术:java springmvc mybatis mysql tomcat js jauery jsp log4j等一些常见基本技术适用于Java毕设和学习使用 主要实现&#xff1a; 前台&#xff1a;登录、注册、酒店信息浏览、搜索酒店信息…

设计模式之装饰模式(Java实现)

“怎么了&#xff0c;鱼哥&#xff1f;” “唉&#xff0c;别提了&#xff0c;网购了一件衣服&#xff0c;结果发现和商家描述的差太多了&#xff0c;有色差就算了&#xff0c;质量还不好&#xff0c;质量不好就算了&#xff0c;竟然大小也不行&#xff0c;说好的3个X&#xff…

ueditor与七牛云存储结合

2019独角兽企业重金招聘Python工程师标准>>> 摘要&#xff1a; ueditor与七牛云存储结合&#xff0c;主要是表单api. ueditor上传图片到七牛云存储 ueditor结合七牛传图片 传统上&#xff0c;图片是存在自己的服务器上(图片->自己服务器)&#xff0c;如果使用…

微服务网关从零搭建——(七)更改存储方式为oracle

资源准备&#xff1a; 下载开源项目 新建oracle表&#xff1a; -- ---------------------------- -- Table structure for OcelotGlobalConfiguration -- ----------------------------CREATE TABLE OcelotGlobalConfiguration (Id NUMBER(11) NOT NULL ,GatewayName NVARCHAR2…

Rocksdb 的优秀代码(一) -- 工业级分桶算法实现分位数p50,p99,p9999

文章目录基本概念普通的分位数计算Rocksdb中的应用rocksdb中的分桶算法结果展示rocksdb 分桶算法实现一些总结 和 相关论文我们知道一个完整的监控系统必须存在p99/p999等分位数指标&#xff0c;作为系统可用性的评判标准之一。而像开源监控系统中做的很不错的grafana和prometh…

Java项目:前后端分离疫情防疫平台设计和实现(java+springmvc+VUE+node.js+mybatis+mysql+springboot+redis+jsp)

源码获取&#xff1a;博客首页 "资源" 里下载&#xff01; 主要技术&#xff1a;Java、springmvc、VUE、node.js、mybatis、mysql、tomcat、jquery、layui、bootstarp、JavaScript、html、css、jsp、log4j等一些常见的基本技术。 主要模块功能有&#xff1a; 管理员…

js里的匿名函数 数组排序

// 匿名函数&#xff1a;其实就是函数的简写形式 var method function(){ alert("123"); } method(); // 匿名函数可以用于事件的处理 function func(){ alert("456"); } window.οnlοadfunc; window.οnlοadfunction(){ alert("加载完成&#xff0…

oracle监听器动态注册于静态注册的区别

2019独角兽企业重金招聘Python工程师标准>>> 1, oracle 10g 用netca方式建立的都默认为动态注册方式 2&#xff0c;如果想改为静态注册的方式则在listener.ora 中加入如下内容即可 SID_LIST_LISTENER (SID_LIST (SID_DESC (SID_NAME PLSExtProc) (ORACLE_HOME …

什么是Singleton?

Singleton&#xff1a;在Java中即指单例设计模式&#xff0c;它是软件开发中最常用的设计模式之一。 单&#xff1a;指唯一 例&#xff1a;指实例 单例设计模式&#xff0c;即某个类在整个系统中只能有一个实例对象可被获取和使用的代码模式。 要点&#xff1a; 一、单例类只能…

磁盘I:O 性能指标 以及 如何通过 fio 对nvme ssd,optane ssd, pmem 性能摸底

文章目录1. 磁盘I/O性能指标1.1 性能指标1.2 I/O 观测1.2.1 磁盘I/O 观测1.2.2 进程I/O观测2. Fio 性能测试2.1 环境准备2.2 测试维度选择2.3 测试2.3.1 optane ssd和nvme ssd性能测试2.3.2 aep性能测试(intel persistent memory)真正测试之前 我们需要清楚 评判磁盘I/O性能 是…

Java项目:旅游网站管理系统设计和实现(java+springboot+jsp+mysql+spring)

源码获取&#xff1a;博客首页 "资源" 里下载&#xff01; 运行环境: java jdk 1.8 IDE环境&#xff1a; IDEA tomcat环境&#xff1a; Tomcat 7.x,8.x,9.x版本均可 主要功能说明&#xff1a; 管理员角色包含以下功能&#xff1a;管理员登录,用户管理,旅游路线管理,…

稀疏矩阵十字链表表示

类型定义 #include<stdio.h> #include<malloc.h> #include<stdlib.h> #define MAX 100 /*稀疏矩阵的十字链表表示&#xff1a;非零元素节点与表头节点公用一种类型 */ typedef struct matrixnode {int row,col;struct matrixnode *right,*down;union{int val…

thrift框架使用C++

2019独角兽企业重金招聘Python工程师标准>>> 1. 编写thrift接口文件student.thrift struct Student{1: i32 sno,2: string sname,3: bool ssex,4: i16 sage, } service Serv{i32 put(1: Student s), } 2. 用“thrift -r --gen cpp student.thrift”在gen-cpp文件夹中…

shell编程:实现shell字符串连接功能

功能&#xff1a;实现shell字符串连接功能 a0 s1test. s2.wav s3.mp3 s40 s500str"sox ./${s1}${a}${s2} ./${a}${s3}"./tts -c bcgirl.0.0.4.bin -b 1 -i input.txt -s 1.0 -speed 1.0 $str rm ./*.wav转载于:https://www.cnblogs.com/kay2018/p/10673110.html

一文运维zookeeper

文章目录1. zookeeper生产环境的安装配置1.1 软件配置1.2 硬件配置1.3 日志配置文件1.4 配置三节点的zookeeper集群2. zookeeper的监控方法2.1 four letters命令2.2 JMX 监控方式3. 通过zookeeper observer实现跨地域部署3.1 什么是observer3.2 observer 提升 写性能3.3 observ…

Java项目:电商书城平台系统设计和实现(java+springboot+mysql+spring+jsp)

源码获取&#xff1a;博客首页 "资源" 里下载&#xff01; JAVA springboot 电商书城平台系统(已调试) 主要实现了书城网站的浏览、加入购物车操作、订单操作、支付操作、分类查看、搜索、以及后台上传图书信息以及订单管理和一些基本操作功能 主要功能截图如下&…

(周三赛)FATE

//题意 打怪的经验值 &#xff0c;消耗忍耐度 看升级后还能保留的最大忍耐度 用 背包去做&#xff0c;不是很会啊 T T Description 最近xhd正在玩一款叫做FATE的游戏&#xff0c;为了得到极品装备&#xff0c;xhd在不停的杀怪做任务。久而久之xhd开始对杀怪产生的厌恶感&#…

ASP.NET MVC 3中ViewBag, ViewData和 TempData

ViewBag, ViewData十分类似&#xff0c;都可用于把数据从controller传递到view。 ViewBag是WebViewPage中的一个属性&#xff0c;它的类型是dynamic。dynamic类型可以理解为&#xff0c;编译器在编译到这种类型时&#xff0c;会跳过类型检查&#xff0c;而在运行时做这些事情。…

如何在指定文件夹下进入jupyter notebook

第一步&#xff1a; 打开 Anaconda Prompt 第二步&#xff1a; 查看文件夹所在路径 例如&#xff1a;你有个jupyterwork文件夹在 D:\ 路径下 第三步&#xff1a; 在Anaconda Prompt依次输入一下命令&#xff1a; d:cd jupyterworkjupyter notebook完成。转载于:https://www.cnb…

Go 分布式学习利器(16) -- go中可复用的package构建

通过本文&#xff0c;你将了解go 语言中如何将自己的package构建到项目中 以及如何将远程&#xff08;github&#xff09;的package构建到项目中。 1. 构建本地的package package 是可复用模块的基本单元&#xff0c;以首字母大写的函数实现来表明可被包外代码访问代码的pack…

JQuery UI

//拖拽插件 draggable <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns"http://www.w3.org/1999/xhtml"><head><title>拖曳…

Java项目:房屋租赁系统设计和实现(java+ssm+mysql+spring+jsp)

源码获取&#xff1a;博客首页 "资源" 里下载&#xff01; 主要功能描述&#xff1a; 1.登录管理&#xff1a;主要有管理员登录和租客登录 2.房源列表以及添加房源功能&#xff1a; 3.租赁合同管理以及在租房源和已退租房源信息管理: 4.看房申请和退租申请管理&a…

学习网页制作中如何在正确选取和使用 CSS 单位

在 CSS 测量系统中&#xff0c;有好几种单位&#xff0c;如像素、百分比、英寸、厘米等等&#xff0c;Web 开发人员很难了解哪些单位在何处使用&#xff0c;如何使用。很多人习惯了总是使用同一种单位&#xff0c;但这一决定可能会严重限制你的设计的执行。 这里推荐的《Which …

SPOJ GSS3-Can you answer these queries III-分治+线段树区间合并

Can you answer these queries III SPOJ - GSS3 这道题和洛谷的小白逛公园一样的题目。 传送门&#xff1a; 洛谷 P4513 小白逛公园-区间最大子段和-分治线段树区间合并(单点更新、区间查询) 代码: 1 #include<bits/stdc.h>2 using namespace std;3 typedef long long l…

Zookeeper ZAB协议原理浅析

文章目录前言1. 基本角色和概念2. Leader Election3. Discovery4. Synchronization5. BroadCast后记前言 DTCC 要在下周一到周三要在北京举办&#xff0c;身边有不少人都去参加了&#xff0c;领略中国最为领先的一些公司的自研存储技术。 阿里自研polardb&#xff0c;polardb-…

Java项目:仓库管理系统设计和实现(java+ssm+springboot+layui)

源码获取&#xff1a;博客首页 "资源" 里下载&#xff01; 主要功能模块 1.用户模块管理&#xff1a;用户登录、用户注册、用户的查询、添加、删除操作、 2.客户信息管理&#xff1a;.客户列表的展示、添加、修改、删除操作、 3.供应商管理&#xff1a;供应商详情…