背景透明css样式,CSS 背景(background)+背景透明(CSS3)
CSS 背景(background)
CSS 可以添加背景颜色和背景图片,以及来进行图片设置。
background-color
背景颜色
background-image
背景图片地址
background-repeat
是否平铺
background-position
背景位置
background-attachment
背景固定还是滚动
背景的合写(复合属性)
background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
背景图片(image)
语法:
background-image : none | url (url)
参数:
none : 无背景图(默认的)
url : 使用绝对或相对地址指定背景图像
background-image 属性允许指定一个图片展示在背景中(只有CSS3才可以多背景)可以和 background-color 连用。 如果图片不重复地话,图片覆盖不到地地方都会被背景色填充。 如果有背景图片平铺,则会覆盖背景颜色。
小技巧: 我们提倡 背景图片后面的地址,url不要加引号。
背景平铺(repeat)
语法:
background-repeat : repeat | no-repeat | repeat-x | repeat-y
参数:
repeat : 背景图像在纵向和横向上平铺(默认的)
no-repeat : 背景图像不平铺
repeat-x : 背景图像在横向上平铺
repeat-y : 背景图像在纵向平铺
设置背景图片时,默认把图片在水平和垂直方向平铺以铺满整个元素。
repeat-x : 背景图像在横向上平铺
repeat-y : 背景图像在纵向平铺
设置背景图片时,默认把图片在水平和垂直方向平铺以铺满整个元素。
背景位置(position)
语法:
background-position : length || length
background-position : position || position
参数:
length : 百分数 | 由浮点数字和单位标识符组成的长度值。请参阅长度单位
position : top | center | bottom | left | center | right
说明:
设置或检索对象的背景图像位置。必须先指定background-image属性。默认值为:(0% 0%)。
如果只指定了一个值,该值将用于横坐标。纵坐标将默认为50%。第二个值将用于纵坐标。
注意:
position 后面是x坐标和y坐标。 可以使用方位名词或者 精确单位。
如果和精确单位和方位名字混合使用,则必须是x坐标在前,y坐标后面。比如 background-position: 15px top; 则 15px 一定是 x坐标 top是 y坐标。
实际工作用的最多的,就是背景图片居中对齐了。
背景附着
语法:
background-attachment : scroll | fixed
参数:
scroll : 背景图像是随对象内容滚动
fixed : 背景图像固定
说明:
设置或检索背景图像是随对象内容滚动还是固定的。
背景简写
background属性的值的书写顺序官方并没有强制标准的。为了可读性,建议大家如下写:
background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
background: transparent url(image.jpg) repeat-y scroll 50% 0 ;
背景透明(CSS3)
CSS3支持背景半透明的写法语法格式是:
background: rgba(0,0,0,0.3);
最后一个参数是alpha 透明度 取值范围 0~1之间
注意: 背景半透明是指盒子背景半透明, 盒子里面的内容不收影响。
背景透明css样式,CSS 背景(background)+背景透明(CSS3)相关推荐
- 下载页面的css样式文件引用的背景图片
在加载网页的时候,一般会缓存该网页使用的图片资源. 我们在页面的Sources目录下是能够找网所使用的样式和图片等资源. 那么如何下载某网站中我们需要的图片? 使用360浏览器,使用F12功能,选中网 ...
- java样式是什么_java css样式 css样式的种类 选择器 文本相关样式 背景相关样式 边框 盒子模式...
今日内容: ? CSS样式 ? CSS样式的种类 ? 选择器 ? 文本相关样式 ? 背景相关样式 ? 边框 ? 盒子模式 select标签 下拉列表标签,常用于单选和多选,是一个组合标签,需要和子标签 ...
- html 点击增加样式,js点击添加css样式 css添加jq点击事件 JavaScript点击增加css样式...
js可实现点击后对div或者其他标签增加或者删除css样式,从而达到实现点击触发某种效果的目的.页面样式可以通过style修饰,也可以通过css修饰,改变css或者添加css可以改变页面的排版.代码如 ...
- 在html语言描述中,css的特点有,css样式 css样式语言特点
层叠样式表(英文全称:CascadingStyleSheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不仅可以静态地修 ...
- html+CSS样式:雪花飘落背景(雪花为图片)
多种雪花图片,自由下落到底端渐变消失 html代码 <!DOCTYPE html><html style="background-color: black"> ...
- 表格内容居中css样式,css表格中的内容如何居中?css表格中的文本样式介绍
你知道css表格的内容太是如何居中的吗?你知道css表格的文本如何设计左对齐吗?你知道css表格如何设置右对齐吗?这些内容都在这篇文章之中等着你来学习了. 首先我们先介绍css表格中的内容是如何居中的 ...
- html中初始化css样式,css样式初始化 normalize
总于找到一款良心的css初始化样式重置,哈哈 在没上google之前,在百度搜一些腾讯,阿里等初始化样式,效果一般般,勉强用, 网上也有很多类似不过大部分都是去除浏览器所有样式 而normalize. ...
- html表格居中设置css样式,css怎么设置table居中?
一般情况下,页面中可以利用align进行页面的居中.靠左或者靠右对齐,但是采用CSS样式表来做更简单一些,下面我们来看一下使用css设置table居中的方法. css设置居中的方法: 1.利用marg ...
- Vue——在vue中,动态js改变css样式 (css 层叠模式)
vue文件 <el-table ref="myTable"> </el-table> <button @click="click" ...
最新文章
- android 解决华为系列手机调试时不能打印Logcat日志信息
- 查看文件详细信息linux,linux命令stat,查看文件详细信息
- 常用验证函数isset()/empty()/is_numeric()函数
- 二分查找——A-B数对(洛谷 P1102)
- html 设置两个标签的相对距离_如何准确计算一div相对另一div的相对距离?
- 微信个性状态来了,可以显示“等级”!
- LinkedListArrayList
- PHP获取表单数据的方法有几种,php获取表单数据的两种方法说明
- 南邮-2022年6月电子商务练习自整理 - 选择篇
- 信息系统项目管理师---第十三章 项目合同管理
- Python报错:IndentationError: unindent does not match any outer indentation level问题的解决办法及原因
- HTML实现简单的贪吃蛇小游戏(附完整源码)
- Linux 环境下iSCSI Target 与 Initiator 配置
- Ubuntu16.04 查看硬盘序列号以及系统版本与安装时间
- 分享|数智化转型咨询赋能白皮书2021(附PDF)
- ssd重装系统的详细教程
- java程序是怎么执行的
- BLE(1)—— 简介
- 会声会影2022VideoStudio中文旗舰版
- 【Marva Collins' Way】第七章