一、CSS背景样式[背景样式、盒子阴影]
一、CSS背景样式
1.背景样式
1.1 背景颜色
代码:background-color: red;
1.2 背景图片
代码:background-image: url(icon-s.jpg);
1.3 背景裁切
解释:该裁切比较有意思,其实就是图片显示的范围是否在边框显示,是否要显示在内边距里面,还是只是在内容区域(不太懂这个区域的请认真阅读前篇盒子模型)
选项 | 说明 |
---|---|
border-box | 边框以内都显示(包含边框、内边距、内容) |
padding-box | 内边距以内都显示(包含内边距、内容) |
content-box | 内容区域(包含内容) |
代码:background-clip: border-box;//默认就是这个
1.4 背景重复
解释:一般需要使用no-repeat这个属性
选项 | 说明 |
---|---|
repeat | 水平、垂直重复 |
repeat-x | 水平重复 |
repeat-y | 垂直重复 |
no-repeat | 不重复 |
space | 背景图片对称均匀分布 |
代码:background-repeat:repeat;//默认就是这个
1.5 背景滚动
解释:使用背景固定可以实现一种很好看的效果
选项 | 说明 |
---|---|
scroll | 背景滚动 |
fixed | 背景固定 |
代码:background-attachment: scroll;// 默认就是这个
1.6 背景位置
解释:原理是盒子不动,背景图片在背后移动(默认图片显示在左上角),相当于在盒子里面展示出露出来的内容;使用用处很大,可以布局图片显示,还可以把好多小图标放一个图片里面改变背景位置显示不同图标
选项 | 说明 |
---|---|
left | 左对齐 |
right | 右对齐 |
center | 居中对齐 |
top | 顶端对齐 |
bottom | 底部对齐 |
x y | 负值表示向右向下,正值表示向左向上 |
代码:background-position: center;background-position: 0 90px;// 水平 和 竖直
1.7 背景尺寸
解释:背景尺寸设置,默认图片按其大小只显示左上角(根据盒子大小显示)
选项 | 说明 |
---|---|
cover | 保持图像的纵横比并将图片缩放一部分,保证能填充满盒子,可能不会完整展示 |
contain | 保持图像的纵横比并将图片缩放保证能完整展示,可能会没有填充满整个盒子 |
x(宽 ) y(高) | 设置尺寸(可能会改变纵横比) |
50px auto | auto可以根据另一项设置的尺寸,保证auto所在这项与另一项尺寸想对应(即保持纵横比) |
代码:background-size: 100% 100%;//改变纵横比全填充进去;background-size:cover;
2.盒子阴影
解释:参数分别为水平偏移,垂直偏移,模糊度,颜色
代码:box-shadow: 10px 10px 5px rgba(100, 100, 100, .5);
3.颜色渐变
解释:代码主要为linear-gradient(red, green);
用的比较少,可以自行查询资料
一、CSS背景样式[背景样式、盒子阴影]相关推荐
- 精灵图,背景图缩放。盒子阴影,
文章目录 精灵图 背景图大小 连写 盒子阴影 过渡 骨架标签 SEO三大标签 标题图标--favicon 精灵图 将小图合成一个大图 优点:减少服务器的发送次数,减轻服务器的压力,提高页面的加载速度 ...
- 小兔鲜项目搭建-精灵图、背景图片大小、盒子阴影、过渡
1.1精灵图: 使用步骤: 1.创建一个盒子,设置盒子的尺寸和小图尺寸相同 2.将精灵图设置为盒子的背景图片 3.修改背景图位置 精灵图的标签一般都用行内标签,如span,b,i: 背景图位置属性:b ...
- css:动画 小米官网盒子阴影 心跳动画
小米官网盒子阴影 <!DOCTYPE html> <html lang="en"><head><meta charset="UT ...
- 【web前端】CSS笔记小结 圆角矩形+盒子阴影+文字阴影(Day 4)
来源:黑马程序员pink老师前端入门教程 目录 I. 圆角边框 ①原理 ②使用 疑惑qwq! ③圆形.圆角矩形及不同圆角的实现 II. 盒子阴影 III. 文字阴影 I. 圆角边框 ①原理 eg. 不 ...
- web前端学习day_02:CSS:三种使用方式/选择器/颜色/背景图片/查看样式/文本/元素显示方式/盒子模型/定位方式/行内对齐/显示层级/防溢出
CSS : Cascading Style Sheet 层叠样式表. 作用: 美化页面 CSS 如何在html页面中添加css样式代码?总共有三种方式: 1.选择器 2.选择器练习: 3.颜色赋值 4 ...
- CSS中添加背景图+盒子边框样式
background-image背景图 *设置图片为背景.* background-image:url("图片路径"): background-size :设置背景图片的大小 属性 ...
- Web前端,CSS背景图片大小、文字阴影、盒子阴影、过渡
前言 持续学习总结输出中,今天分享的是Web前端,CSS背景图片大小.文字阴影.盒子阴影.过渡 背景图片大小 background-size:宽度 高度; 设置背景图片的大小 取值 场景 数字+px ...
- CSS再学习(如何设置背景图片透明,弹性盒子,盒子阴影)+HTML冷门知识
目录 css组合器 后代选择器 (空格) 子选择器 (>) 相邻兄弟选择器 (+) 通用兄弟选择器 (~) CSS伪类选择器 什么是伪类? 能干什么? 注意事项 鼠标悬浮提示的功能 first- ...
- html基础背景、边框样式、内外边框、盒子尺寸大小计算
css背景 background-color 背景顔色 background-image 背景图片 background-repeat 是否平铺 background- ...
最新文章
- html链接伪类设置鼠标悬停,链接伪类可以控制超链接的样式吗?是怎样实现的?...
- android layout include merge,Android 布局优化之include与merge
- [UOJ #167]【UR #11】元旦老人与汉诺塔
- 前端 PDFObject.embed预览PDF,另类方式隐藏工具条样例
- android studio gradle home,Android Studio3.0 Gradle 4.1配置
- webpack -- 无法将“webpack”项识别为 cmdlet 。。。
- MVN TEST指定运行脚本
- python足球作画
- DxO FilmPack 5 for Mac(胶片模拟效果滤镜软件)
- Android之实现手写电子签名
- 俄乌战争乌克兰死了多少人?
- 带你掌握Visual Studio Code的格式化程序
- OLED12864裸屏驱动电路
- 患者到医院看病事件模拟(c++)
- Fiddler抓取移动端APP流量数据
- 海康威视人脸门禁对接开发(一)调用设备篇
- php代码实现xml格式转换,PHP实现XML与数据格式进行转换类实例
- GB/T19001-2008/ISO 9001:2008条款图解
- 如何把歌曲里的伴奏音乐提取出来,分享几个方法给大家!
- 启动Tomcat报如下信息:The APR based Apache Tomcat Native library which allows optimal performance in product