background 背景属性详解
background 背景属性
我们知道元素有前景色color,与之对应的还有背景色,通过background我们可以为元素添加实色(background-color)和任意多个背景图片(background-image)。
css 背景常见属性
- background-color
- background-position
- background-size
- background-repeat
- background-origin
- background-clip
- background-attachment
- background-image
一、background-color
background-color 属性设置元素的背景颜色。它会会填充元素的内容、内边距和边框区域,扩展到元素边框的外边界(但不包括外边距)。如果边框有透明部分(如虚线边框),会透过这些透明部分显示出背景色。如果不想它包含边框可以用它的另一个属性clip来处理。
看效果图,我们知道默认背景颜色会填充边框的。
它的取值有:
1、关键字:red,blue等
2、十六进制值:#ff0000
3、transparent值
4、inherit:从父元素那继承的值
5、rgb、rgba(如rgba(255,255,0,.8))、hsl、hsla(如hsla(360, 50%, 50%, .5))
等
二、background-position
background-position属性顾名思义是用来控制背景的位置,它同时设定了元素和图片的原点,而原点决定了元素和图片中某一点的水平和垂直坐标。默认情况原点位于左上角。也就是说元素的左上角和图片的左上角是对齐的。
它的取值:
一、它的五个关键字:top、left、right、bottom、center。二二取值都可以成为它们的属性值。
- top left
- top center
- top right
- center left
- center center
- center right
- bottom left
- bottom center
- bottom right
上面的关键字如果只设定一个,那另外一个也会取相同的值。关键字的顺序不重要,left bottom和bottom left意思一样。
二、百分比值:
第一个值是水平位置,第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。只设定一个值,则只用来设定水平位置,而垂直位置会默认设为center。
三、像素或其他css单位
第一个值是水平位置,第二个值是垂直位置。左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。如果您仅规定了一个值,另一个值将是50%。您可以混合使用 % 和 position 值。
此外还可以运用正负值,将图片左上角定位到元素外部,或将图片右下角推到元素外部。
1 |
|
效果图:
三、background-repeat
background-repeat 属性设置如何重复背景图像。默认背景图像在水平和垂直方向上重复。
它的取值有:
repeat:默认值
repeat-x:水平方向重复
repeat-y:水平方向重复
no-repeat:图像只出现一次
inherit:继承
此外css3还新增二个值:
background-repeat:round:为图片不被剪切,自动调整图片大小来适应背景区域。
background-repeat:space:为图片不被剪切,自动添加图片间空白来适应背景区域。
下图是值为background-repeat:space的效果图:
下面是值为background-repeat:repeat-y的效果图:
四、background-image
该属性为元素设置背景图像。格式为background-image:url(图片路径)。
五、background-size
css3新增的背景尺寸,顾名思义就是来调整图片的尺寸。
它的取值:
百分比:%
像素值:第一个值设置宽度,第二个值设置高度。
cover:拉大图片,完全填满背景区;保持宽高比。
contain:缩放图片,使其恰好适合背景区;保持宽高比。
上面最后二个属性值会将很小的图片拉得很大,so会导致图片失真。
六、background-attachment
该属性规定元素内背景图片是否随元素滚动而移动。默认值是scroll。
它的值:
scroll
fixed:背景图像不会随元素移动。通常应用给body元素中心位置添加水印等,让水印不随页面滚动而移动。
inherit
七、background-clip
background-clip 属性规定背景的绘制区域。
它的取值:
content-box:背景被裁剪到内容框
border-box:背景被裁剪到边框盒
padding-box:背景被裁剪到内边距
1 |
|
上面的代码给容器增加了15px的内边距后,背景被裁剪了内容区域里,
效果图如下:
八、background-origin
background-origin 属性规定 background-position 属性相对于什么位置来定位。
取值:
content-box:背景图像相对于内容框来定位
border-box:背景图像相对于边框来定位
padding-box:背景图像相对于内边距框来定位
如果背景图像的 background-attachment 属性为 "fixed",则该属性没有效果。
九、背景渐变
background:linear-gradient
background:radial-gradient
具体解释看这一篇
十、background-break
控制分离元素的显示效果
background 背景属性详解相关推荐
- 【前端小点】CSS之background背景属性详解
本篇文章我们将一起展开来看css的background背景属性. 一.结构 创建DIV <div class="div1">1 </div> 样式 widt ...
- SVG排版教程 | 样式背景属性详解与应用
<元素属性原理详解与应用>讲到了SVG元素viewBox属性的实际应用,能够实现SVG元素在不同手机上的自适应适配(SVG元素的宽高根据手机屏幕大小等比例放大或缩小).SVG黑科技排版的每 ...
- 零基础学习CSS---05.CSS背景属性详解
CSS属性 一.背景属性 1.background-color(背景颜色):red: 2.background-image(背景图片):background-image:url(图片地址); 3.ba ...
- background各个属性详解
html永远不会出现滚动条 如果html或body其中一个添加overflow: auto;,滚动条只会出现在document上 html和body同时添加overflow: auto 属性才可以在b ...
- background属性详解
background属性详解 background属性主要由以下5个属性组成, background-color::规定要使用的背景颜色 background-image:规定要使用的背景图像 bac ...
- Flash播放控件属性详解
Flash 播放控件属性详解 一.属性篇 1.AlignMode(读写) 语法:AlignMode As Long 说明:对齐方式(与SAlign 属性联动).当控件的长宽比例与影片不一致且WMo ...
- 如何把canvas元素作为网站背景总结详解
如何把canvas元素作为网站背景总结详解 一.总结 一句话总结:最简单的做法是绝对定位并且z-index属性设置为负数. 1.如何把canvas元素作为网站背景的两种方法? a.设置层级(本例代码就 ...
- css动画-animation各个属性详解(转)
CSS3的animation很容易就能实现各种酷炫的动画,虽然看到别人的成果图会觉得很难,但是如果掌握好各种动画属性,做好酷炫吊炸天的动画都不在话下,好,切入正题. 一.动画属性: 动画属性包括: ...
- Unity 之 打包参数 -- Player面板属性详解
Unity 之 Project Setting -- Player 面板属性详解 前言 一,Player 1.1 属性说明 1.2 效果展示 二,ICON(图标) 2.1 属性说明 2.2 使用示例 ...
最新文章
- 第三课.Linux代码编辑器
- Opencv中Homography
- python3.6.3安装-CentOS6.8安装Python3.6.3
- Java 多线程之单例设计模式
- 你不知道的 IDEA Debug 调试小技巧!
- 【C语言】C语言学习整理-putchar,printf,getchar,scanf定义及区别
- php 百度报表工具下载,PHP Report Maker12最新版
- 黄聪:选择适当的关键词
- 48. Rotate Image java solutions
- 软件测试计划测试范围怎么写,测试计划模板-软件测试报告如何写
- webpack使用exclude
- template < class T> ,map和vector用法——恶补c++
- 关于微信小程序中的.eslintrc.js
- makefile predefined variable $^ $@
- 1063 Set Similarity (25 分) java 题解
- EDM设计案例分享:6款引人入胜的夏日邮件营销模板分享
- 外贸客户催货催的很急的原因
- 计算机通信机房消防要求,信息机房对环境有什么要求
- 好像还挺好玩的GAN重制版4——Pytorch搭建SRGAN平台进行图片超分辨率提升
- vue中Promise的用法
热门文章
- 张凯复旦大学计算机学院,徐丰 - 师资队伍 - 复旦大学信息科学与工程学院
- [渝粤教育] 西南科技大学 法律文书写作 在线考试复习资料
- 30ea是什么意思_数量单位EA是什么意思?EACH? 单位EA是什么意思
- C盘存储空间不够?拓展C盘空间的方法
- OJ每日一练文章目录汇总
- Python lambda 介绍
- Feign客户端异常IOException: Incomplete output stream解决方案
- log4j2输出中文乱码
- android 官方bootloader,安卓系统bootloader模式是什么?如何进入bootloader模式
- 20均线和60均线的关系和看点